AngularJS 指令 | 菜鳥(niǎo)教程(2)
- scope:
Boolean or Object
scope參數(shù)的作用是棠众，隔離指令與所在控制器間的作用域、隔離指令與指令間的作用域。
scope參數(shù)是可選的撩幽，默認(rèn)值為false兜挨，可選true、對(duì)象{};
false：共享父域
true：繼承父域僚害，且新建獨(dú)立作用域
Object：不繼承父域硫椰，且新建獨(dú)立作用域
指令scope參數(shù)——false、true萨蚕、{}對(duì)比測(cè)試
view1.html
parent:
<span>{{parentName}}</span>
<input type="text" ng-model="parentName" />
</div>
<br>
<child-a></child-a>
<br>
<child-b></child-b>
<br>
<child-c parent-name="parentName"></child-c>
view1.js
.config(['$routeProvider', function ($routeProvider) {
$routeProvider.when('/view1', {
templateUrl: 'view1/view1.html',
controller: 'View1Ctrl'
});
}])
.controller('View1Ctrl', ['$scope',
function ($scope) {
$scope.parentName = "這里是測(cè)試文本";
}])
//false：共享作用域
.directive('childA', function () {
return {
restrict: 'E',
scope: false,
template: function (elem, attr) {
return "false:" + document.getElementById('hh').innerHTML;
}
};
})
//true：繼承父域靶草，并建立獨(dú)立作用域
.directive('childB', function () {
return {
restrict: 'E',
scope: true,
template: function (elem, attr) {
return "true:" + document.getElementById('hh').innerHTML;
},
controller: function ($scope) {
// $scope.parentName = "快使用雙截棍";
//已聲明的情況下，$scope.$watch監(jiān)聽(tīng)的是自己的parentName
$scope.$watch('parentName', function (n, o) {
console.log("child watch" + n);
});
//$scope.$parent.$watch監(jiān)聽(tīng)的是父域的parentName
$scope.$parent.$watch('parentName', function (n, o) {
console.log("parent watch" + n);
});
}
};
})
//{}：不繼承父域岳遥，建立獨(dú)立作用域
.directive('childC', function () {
return {
restrict: 'E',
scope: {},
template: function (elem, attr) {
return "{}:" + document.getElementById('hh').innerHTML;
},
controller: function ($scope) {
console.log($scope);
}
};
});
結(jié)論
我們可以看到
- fasle類別的輸入框的值繼承父域的值奕翔。父作用域的值隨子作用域變化。
- true類別的輸入框的值繼承父域的值浩蓉，但新建作用域派继。父作用域的值不隨子作用域變化。
- {}類別的輸入框的值不繼承父域的值捻艳，新建作用域驾窟。父作用域的值不隨子作用域變化。
