angularjs根镜和孤立的范围

时间:2017-02-22 09:25:53

标签: angularjs

下面是我的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 吗?

FIDDLE

3 个答案:

答案 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]
  };
});

https://jsfiddle.net/a1gf9fwc/2/

答案 2 :(得分:1)

在你的指令中使用scope: {}