下面是我的html和javascript
<div ng-app="myApp" ng-controller="myCtrl">
{{firstname}}
<sample-directive></sample-directive>
</div>
JS
var app = angular.module("myApp", []);
app.run(function($rootScope){
$rootScope.firstname = "Root scope value"
});
app.controller("myCtrl", function($scope) {
});
app.directive("sampleDirective",function(){
return{
template:"<div>{{firstname}}</div>",
controller:['$scope',sampleDirectiveScope]
};
});
function sampleDirectiveScope($scope){
$scope.firstname = "scope value";
};
我希望“根范围值”显示在表达式中,“范围值”显示在指令标记内
为什么它们都显示范围值?
表达式{{firstname}}
不应该从rootscope获取值,因为我只在指令的控制器中更改了 firstname 吗?
答案 0 :(得分:2)
默认情况下,指令的$scope
指向其上方的任何范围。使用scope属性进行调整。
var app = angular.module("myApp", []);
app.run(function ($rootScope) {
$rootScope.firstname = "Root scope"
});
app.controller("myCtrl", function ($scope) {
$scope.lastName = "Doe";
});
app.directive("sampleDirective", function () {
return {
template: "<div>{{firstname}}</div>",
scope: {}, // isolated scope
controller: ['$scope', sampleDirectiveScope]
};
});
使用scope: {}
提供了一个独立的范围,与上面的范围分开。在{}中,您可以提供要明确传入的属性列表。范围的其他可能值:false
(默认值,指向上面的范围)和true
(指向上方)范围通过原型设计)。
更多信息:https://docs.angularjs.org/guide/directive(向下滚动一下,或搜索&#34;隔离范围&#34;)
答案 1 :(得分:1)
共享范围是Angular-Directives的默认行为。 有关非常详细和完整的答案,请查看此帖子: https://stackoverflow.com/a/19775531/3686898
这是您更新后的新范围:
app.directive("sampleDirective",function(){
return{
template:"<div>{{firstname}}</div>",
scope: {},
controller:['$scope',sampleDirectiveScope]
};
});
答案 2 :(得分:1)
在你的指令中使用scope: {}