angularjs指令link函式引數scope,指令controller依賴注入的$scope,與指令外部controller的$scope的關係
還是看程式碼
當指令中scope:false時
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="bootstrap.min.css">
<script src="jquery.min.js"></script>
<script src="angular.min.js"></script>
<script src="bootstrap.min.js"></script>
<script type="text/javascript">
var app = angular.module('myapp', []);
app.controller('myController', function($scope) {
$scope.btnName = 'click';
$scope.click = function() {
console.log($scope.btnName);
};
});
app.directive('duplicate', function(){
return {
restrict: 'EA',
replace: true,
transclude: true,
link: function(scope, elem, attrs) {
console.log('link : ' + scope.btnName);
scope.btnName = 'link';
},
controller: ['$scope', function($scope) {
console.log('controller: ' + $scope.btnName);
}],
template:"<span ng-transclude></span>"
}
});
</script>
<style type="text/css">
</style>
</head>
<body ng-app="myapp" ng-controller="myController">
<div duplicate>
<button ng-click="click()" class="btn btn-primary">{{btnName}}</button>
</div>
</body>
</html>
可以看到這三個scope是同一個scope, 一開始btnName為click,後來在link函式中改變為link,於是button也就顯示為link.
scope為isolate時
<!DOCTYPE html>
<html><head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="bootstrap.min.css">
<script src="jquery.min.js"></script>
<script src="angular.min.js"></script>
<script src="bootstrap.min.js"></script>
<script type="text/javascript">
var app = angular.module('myapp', []);
app.controller('myController', function($scope) {
$scope.btnName = 'click';
$scope.click = function() {
console.log($scope.btnName);
};
});
app.directive('duplicate', function(){
return {
restrict: 'EA',
replace: true,
transclude: true,
scope: {
btnName:'@'
},
link: function(scope, elem, attrs) {
console.log('link : ' + scope.btnName);
},
controller: ['$scope', function($scope) {
console.log('controller: ' + $scope.btnName);
}],
template:"<span ng-transclude></span>"
}
});
</script>
<style type="text/css">
</style>
</head>
<body ng-app="myapp" ng-controller="myController">
<div duplicate btn-name="111111">
<button ng-click="click()" class="btn btn-primary">{{btnName}}</button>
</div>
</body>
</html>
可以看到，指令中scope與外部scope獨立，controller中的scope與link引數中的scope一致，並且先執行controller再執行link,所以不確定的話可以在controller中修改然後觀察link函式中scope中的值，如果也變了，那就說明controller與link中的scope一樣.(驗證過，確實一起變了)