Wie definiert man allgemeine Anweisungen in controllerAs Syntax?

Ich las Digging into Angular's "Controller as" syntax Artikel. Es zeigt unten Snippet, um "Controller als" -Syntax in Direktive zu verwenden.Wie definiert man allgemeine Anweisungen in controllerAs Syntax?

app.directive('myDirective', function() { 
    return { 
    restrict: 'EA', 
    replace: true, 
    scope: true, 
    template: [].join(''), 
    controllerAs: '', // woohoo, nice and easy! 
    controller: function() {}, // we'll instantiate this controller "as" the above name 
    link: function() {} 
    }; 
});

Hier muss ich Controller-Name controller Eigenschaft festlegen. Wenn ich jetzt eine gemeinsame Direktive definieren möchte, die ich in mehreren Controllern verwenden möchte, wie kann ich das tun?

Edit 1:

Ich veröffentliche den Code über das, was ich erreichen will. In der Ansicht gibt es ein Eingabe-Tag für die Datei und wenn die Datei ausgewählt ist, möchte ich den Namen und Inhaltstyp. Ich werde das Änderungsereignis des Eingabe-Tags verwenden. Ich weiß nicht, wie ich das Dateiobjekt an mein vm übergeben kann. Ich möchte diese Direktive verwenden, die Change Event verwendet, um Informationen über die Datei in mehreren Controllern zu erhalten.

index.html

<!DOCTYPE html> 
<html lang="en" ng-app="myApp"> 
<head> 
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.js"></script> 
    <script src="/myCtrl.js"></script> 
</head> 

<body ng-controller="MyController as vm"> 
    <input name="file" type="file" file /> 
    <input type="button" ng-click="vm.upload(vm.file);" value="Upload" /> 
</body> 
</html>

myCtrl.js

var app = angular.module('myApp', []); 

app.controller('MyController', MyController); 

MyController.$inject = ['$http']; 

function MyController($http) { 
    var vm = this; 

    vm.file = null; 
    vm.upload = function(file) { 
     $http.post('/upload', { filename: file.name, contentType: file.type }) 
     .success(function(resp) { 
      console.log(resp); 
     }) 
     .error(function(resp) { 
      console.log(resp); 
     }); 
    } 
} 

app.directive('file', function() { 
    return { 
    restrict: 'AE', 
    scope: true, 
    controllerAs: 'vm', 
    link: function(scope, el, attrs){ 
     el.bind('change', function(event){ 
     var files = event.target.files; 
     var file = files[0]; 

     // What to write here to pass file object into vm ? 

     // Below line is for that controller design which uses $scope service. But I am using controllerAs syntax 
     // scope.file = file; 
     // scope.$apply(); 
     }); 
    } 
    }; 
});

Quelle

2016-09-07 Xyroid

sehr guter Artikel über sie bitte http://blog.thoughtram.io/angularjs/2015/01/02/exploring-angular-1.3-bindToController.html

Quelle

2016-09-07 11:16:59 SuperComupter

Bitte die bearbeitete Frage prüfen. – Xyroid

lesen Wenn Sie die mehrere Controller mit einziger Richtlinie Definition teilen mögen, dann Definierte die Direktive ohne Controller (optional).

IMP: definiert die Richtlinie mit scope: true oder mit default scope verlassen, aber nicht isolated scope definieren. Dadurch kann die Direktive die im übergeordneten Controller definierte Methode und Eigenschaft erben.

Und legen Sie die Richtlinie innerhalb ng-controller Direktive in Vorlage.

Regler 1:

<div ng-controller='ctrl1"> 

    <my-directive></my-directive> 
<div>

Controller 2:

<div ng-controller='ctrl2"> 

    <my-directive></my-directive> 
<div>

n-ten Weg.

EDIT1:

In Controller (MyController): Sie verwenden können $broadcast

vm.upload = function(fileObj){ 

    $rootScope.$broadcast('sending-file-object',{data:fileObj}) 
}

in allen anderen Controller erhalten $on verwenden,

$scope.$on('sending-file-object',function(event,data){ 
    console.log(data) // here you get data; 
})

Quelle

2016-09-07 11:18:08

Bitte überprüfen Sie die bearbeitete Frage. – Xyroid

Wie definiert man allgemeine Anweisungen in controllerAs Syntax?

Antwort

Verwandte Themen