0

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

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

我正在进行的 $watch 似乎也没有工作，我在那里放了一些日志语句，我手动更改了“test”指向的变量，但它的行为就好像它从未改变过一样。

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

包含的 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-show =的html “！loadVal”已打开。

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

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

4

1 回答 1

1

首先，您似乎正在尝试访问指令中指令的隔离范围的test属性。( ) 那是行不通的。实际上试图在您的代码中绑定的内容是在父范围内。如果您想使用指令范围的属性来获得可见性，请在您的模板中使用它。loadingng-show<loading test="loadVal" ng-show="test"></loading>ng-show$scope.testtest

此外，没有必要在你的指令中使用 $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>.

于 2013-08-28T22:29:35.807 回答