Maison > Questions et réponses > le corps du texte
‘@’和'='倒是好理解,有没有一个必须使用'&'的场景?
<body ng-app="myApp" ng-init="content='abc'">
<p ng-controller="myController" >
<input type="text" ng-model="content" />
<p my-directive my-title="title" my-content="content" ></p>
</p>
</body>
<script type="text/javascript">
var myApp = angular.module('myApp', [])
.directive('myDirective', function($rootScope) {
return {
priority:1000,
restrict: 'A',
replace: true,
scope: {
myTitle:'@',
myContent: '='
},
template: '<p><h2>{{myTitle}}</h2><p>from myDirective:{{myContent}}</p></p>'
};
})
.controller('myController',function($scope){
$scope.content = 'from controller';
});
</script>
希望可以提供一个demo。
phpcn_u15822017-05-15 16:52:53
Utilisation de
& : transmettre une fonction depuis la portée parent et appeler
plus tardQuand l'utiliser : Lorsque nous devons appeler une méthode de contrôleur dans une directive, nous transmettons généralement certains paramètres de la directive à la méthode du contrôleur
Cas réel : par exemple, dans une directive structurée en arborescence, après avoir sélectionné un nœud, nous devons effectuer d'autres opérations sur le nœud dans le contrôleur, comme aller sur le serveur pour récupérer des données en fonction du nœud sélectionné. Donc dans la directive, nous devons transmettre le nœud sélectionné au contrôleur.
Démo
Code démo :
javascript
angular.module('docsIsoFnBindExample', []) .controller('Controller', ['$scope', '$timeout', function($scope, $timeout) { $scope.name = 'Tobias'; $scope.message = ''; $scope.hideDialog = function (message) { $scope.message = message; $scope.dialogIsHidden = true; $timeout(function () { $scope.message = ''; $scope.dialogIsHidden = false; }, 2000); }; }]) .directive('myDialog', function() { return { restrict: 'E', transclude: true, scope: { 'close': '&onClose' }, templateUrl: 'my-dialog-close.html' }; });
html
<p ng-controller="Controller"> {{message}} <my-dialog ng-hide="dialogIsHidden" on-close="hideDialog(message)"> Check out the contents, {{name}}! </my-dialog> </p>
mon-dialog-close.html :
<p class="alert">
<a href class="close" ng-click="close()">×</a>
<p ng-transclude></p>
</p>