5

更新范围时指令的属性不会改变，它们仍然保持初始值。我在这里想念什么？

HTML

<ul class="nav nav-pills nav-stacked" navlist>
    <navelem href="#!/notworking/{{foo}}"></navelem>
    <navelem href="#!/working">works great</navelem>
</ul>

<p>works: {{foo}}</p>

Javascript （基于首页上的角度标签示例）

angular.module('myApp.directives', []).
directive('navlist', function() {
    return {
        scope: {},
        controller: function ($scope) {
            var panes = $scope.panes = [];

            this.select = function(pane) {
                angular.forEach(panes, function(pane) {
                    pane.selected = false;
                });
                pane.selected = true;
            }

            this.addPane = function(pane) {
                if (panes.length == 0)
                    this.select(pane);
                panes.push(pane);
            }

        }
    }
}).
directive('navelem', function() {
    return {
        require: '^navlist',
        restrict: 'E',
        replace: true,
        transclude: true,
        scope: { href: '@href' },
        link: function(scope, element, attrs, tabsCtrl) {
            tabsCtrl.addPane(scope);
            scope.select = tabsCtrl.select;
        },
        template:
            '<li ng-class="{active: selected}" ng-click="select(this)"><a href="{{href}}" ng-transclude></a></li>'
    };
});
4

3 回答 3

8

通过scope: {}在您的指令中定义，它正在创建一个isolated scope. 所以父范围现在从指令中是不可见的。

如果你想引用父作用域，那么你可以把scope: true共享作用域（在相同的指令中）放在普通作用域嵌套中省略作用域声明。或者，如果您只想引用$scope.foo父级，则可以像在子指令中所做的那样定义显式范围变量。

于 2012-09-19T23:28:49.363 回答
8

指令范围继承分为三种类型：

  1. 没有“范围：...”或显式scope: false- 没有创建新范围。该指令使用与父级相同的范围。这既简单又方便，但是如果您正在构建可重用的组件，则不建议这样做，因为该指令可能仅在父作用域具有定义指令需要使用/访问的某些作用域属性时才可用。
  2. scope: true- 创建一个新范围，由同一元素上的所有指令共享，具有父范围的正常原型继承。同样，可能不是可重用组件的最佳选择，因为该指令可能不应该访问父范围属性——它可能会意外更改父范围内的某些内容。
  3. scope: { ... }- 创建一个新的“隔离”范围——它在原型上并不从父范围继承。但是，对象散列（即 { ... } ）允许我们定义从父范围派生的本地指令范围属性——因此我们可以控制哪些属性是共享的，以及如何共享。
    1. 使用 '=' 在父作用域属性和指令作用域属性之间进行强大的双向绑定——对任一作用域属性的更改都会影响另一个。
    2. 使用“@”将父属性值绑定到指令范围属性。这本质上是单向绑定。只有父范围更改会影响指令范围。
    3. 使用 '&' 绑定到父范围表达式/函数。

对于您的特定问题，您需要在对象哈希中指出您希望哪些范围属性具有 2-way 绑定。

有关指令范围（包括图片）的更多信息，请参阅此处的指令部分： AngularJS 中范围原型/原型继承的细微差别是什么？

于 2012-12-01T05:00:35.470 回答
0

就像 Mark Rajcok 所说 - scope: {} 将创建一个新的隔离范围，它不会从父级继承属性，但是我们仍然可以通过使用 $parent 属性来访问这些属性。

控制器：

app.controller('indexController', function($scope) {
    $scope.test="Hello world!";
});

指示

app.directive("test", function() {
    return{
        restrict: "A",
        scope: {},
        controller: function($scope){
            console.log("directiv $scope.$parent.test: " + $scope.$parent.test);
            console.log("directiv $scope.test: " + $scope.test);
        }
    };
});

输出：

directiv $scope.$parent.test: Hello world!
directiv $scope.test: undefined
于 2013-08-20T14:13:36.573 回答