‘@’ and ‘=’ are easy to understand. Is there a scenario where ‘&’ must be used?
<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>
I hope you can provide a demo.
Usage of
&: Pass a function from the parent scope to be called later
When to use it: When we need to call a controller method in a directive, we usually pass some parameters in the directive to the controller method
Actual case: For example, in a tree-structured directive, after we select a node, we need to perform further operations on this node in the controller, such as fetching data from the server based on the selected node. So in the directive, we need to pass the selected node to the controller.
Demo
Demo code:
my-dialog-close.html: