Question

我有一个控制器，它调用执行$ http.get

的服务

app.controller('myController', function ($scope, mService) {

    $scope.chair;

    myService.getData().then(function (data) {
        $scope.chair = data.chairID;
    });

});

在控制器的范围内，我有一个指令，我试图传递$ scope.chair的值：

<section ng-controller="mycontroller">

    <my-directive data-chair="chair"></my-directive>

</section>

在myDirective.js中

restrict: 'E',
replace: true,
templateUrl: 'app/some-file.html',
scope: {
    chair: '='
},
controller: [ '$scope', function ($scope) {
    alert('got chair : ' + $scope.chair);
    ....

然而，有了上述内容，我发现警报时未定义（＆＃39;得到主席：＆＃39; + $ scope.chair）;

在控制器内，如果我硬编码椅子：

app.controller('myController', function ($scope, mService) {

    $scope.chair = 'hello';

    myService.getData().then(function (data) {
        $scope.chair = data.chairID;
    });

});

我的指示会显示hello。

Answer 1

当您尝试在指令中访问它时，可能未设置“Chair”内部变量。您似乎也可以通过服务异步加载值。

您需要在指令中附上手表。在“chair”范围变量的值更改后，将在下一个角度$ digest阶段调用传递给watch的回调。

...
controller: [ '$scope', function ($scope) {
    $scope.$watch('chair', function(chairValue) {
        if (chairValue === undefined) return;

        // There is a value.
        alert('got chair : ' + $scope.chair);
    });
}]

此代码将导致每次值更改时调用回调。

如果您不想处理值更改，请在值稳定后清除监视（与undefined 不同）。如果您有许多绑定和监视的复杂视图，这将带来更好的性能。

...
controller: [ '$scope', function ($scope) {
    var unwatch = $scope.$watch('chair', function(chairValue) {
        if (chairValue === undefined) return;

        // There is a value.
        alert('got chair : ' + $scope.chair);
        unwatch();
    });
}]

Answer 2

这应该有效：

.directive('myDirective', function() {
  return {
    restrict: 'E',
    replace: true,
    templateUrl: 'app/some-file.html',
    scope: {
        chair: '='
    },
    link: function(scope, element, attrs) {
       alert('got chair : ' + scope.chair);
    }
  }
});

控制器服务调用后更新指令范围

2 个答案: