javascript - 属性双向绑定(bind)时Angularjs undefined object

Question

我在 AngularJS 中尝试做的事情遇到了问题。事情是这样的:

我有一个 Controller ，并且有一个定义如下的指令:

helpers.directive('someEvent', function() {

    ...
    scope: {
       api: '='
    }
    ...
    controller: ['$scope', function($scope) {

        $scope.hasSomeEventOccured = function(){

            return booleanVariable
        };

        $scope.api = {
           hasSomeEventOccured: $scope.hasSomeEventOccured
       }
    }]

});

然后，在其他一些 Controller 中，我想访问该函数 hasSomeEventOccured... Controller 定义如下:

moduleName.controller('moduleSomethingController',
['$scope', '$state', 'moduleRepository', function ($scope, $state, moduleRepository) {

    $scope.theEventOccured = $scope.someEventApi.hasSomeEventOccured();

}]);

在 cshtml 文件中我有:

<some-event api="someEventApi" ></some-event>

<div ng-if="theEventOccured"></div>

偶尔出现的错误是$scope.someEventApi未定义。因此这一行中断: $scope.theEventOccured = $scope.someEventApi.hasSomeEventOccured();我认为发生这种情况是因为在 moduleSomethingController 中对 hasSomeEventOccured 的调用发生在与 someEvent 的绑定(bind)完成之前。

我的问题是你如何解决这个问题？

我知道在指令中你会有类似的内容:

link: function(scope, element, attrs) {
   attrs.$observe(...);
}

但是在我的情况下如何实现等待绑定(bind)完成之类的功能呢？

Answer 1

SO-您收到“$scope.someEventApi is undefined”错误的原因是因为您没有在任何地方设置它。它是未定义的!您在 Controller 内使用的所有内容都应该定义(var x = some...)或注入(inject)(就像您在示例中注入(inject) $scope 一样)

在我看来，你有两种选择来获得你想要的东西:

1. 一种常见且直接的方法是在 Controller 中定义函数，然后将该函数发送到指令。这意味着您需要添加指令定义，如下所示:

范围:{theEventOccured: '&' }

& 符号表示它是一个函数。

在你的 Controller 内:

$scope.theEventOccured = function() { /* your code here */ }

这样 - API 实际上是在 Controller 内部定义的，并且指令在需要时使用它。

1. 对于更复杂的东西 - 您可以创建一个 .factory 并将其绑定(bind)到您的 Controller 和指令。

2. 如果您尝试在不同 Controller (或指令 Controller )之间进行通信，您可以使用工厂或 $broadcast 事件。请参阅 the scope api 中的 $broadcast 和 $emit

另外两件重要的事情:通常您不应该在其父 Controller 范围内使用指令的函数如果我明白你想要实现什么，你就不需要在这里$observe。