Question

如何根据父母范围内容的变量让我的指令正确更新？

我有一个动画指令，我想用它来显示需要通过执行服务调用来填充的各个数据网格的加载。我目前有一个页面的主模板，我有一个ng-include用于我要在页面上显示的某个“小部件”。小部件将显示带有填充信息的div或加载指令将显示，至少这是我试图让它做的。

我正在进行的$ watch似乎也没有工作，我已经在那里放了一些日志语句并且我手动更改了“test”指向的变量，但它表现得好像它从来没有改变。

//One approach to the directive
myApp.directive('loading', function() {
    return {
        restrict: "E",
        scope : {
            test : '='
        },
        templateUrl: 'partials/loading-animation.html'
    };
});

include的html，其中也包含指令。 loadVal是父父控制器范围的变量。 loadVal根据服务调用进行更改并正确更新。

<div ng-show="!loadVal" class='address store'>
    <span>{{address.storeName}}</span>
    <span>{{address.address1}}</span>
    <span>{{address.city}},{{address.state}} {{address.zip}}</span>
</div>
<loading test="loadVal" ng-show="test"></loading>

现在，如果我只有指令，它仍然没有出现。我已经尝试过使用ng-switch，但由于没有路由更改，它会显示加载指令和地址信息。我也尝试过显示一个是真是假（！loadVal和loadVal），问题是虽然它似乎不知道“！loadVal”是什么，因为它从不显示ng-ng ng-show = “！loadVal”已开启。

编辑：看起来我工作得很好，这里有一个plnkr显示我想要实现的目标： Plnkr

注意：我注意到我无法在指令模板上使用ng-show（即ng-show =“loadVal”）引用父级范围的父级。但是，如果我创建一个新变量并且范围是双向的并且将该变量设置为等于loadVal，那么它将获取更改。

Answer 1

首先，您似乎正在尝试访问test指令中loading指令的隔离范围的ng-show属性。（<loading test="loadVal" ng-show="test"></loading>）那不行。 ng-show实际上尝试在代码中绑定的内容是父作用域中的$scope.test。如果要使用指令范围的test属性进行可见性，请在模板中使用它。

此外，您现在无需在指令中使用$ watch，您几乎不需要使用scope.$apply()来更改范围属性。 AngularJS将大部分代码包含在$apply调用中。

试试这个：

myApp.directive('loading', function() {
    return {
        restrict: "E",
        replace: true,
        scope : {
            test : '='
        },
        template: '<div ng-show="test"></div>'
    };
});

我将templateUrl替换为内联模板仅用于演示目的。

视图中的loading指令可以简化为<loading test="loadVal"></loading>。

AngularJS包含指令的范围

1 个答案: