屬性雙向綁定時AngularJS未定義對象

Question

我在AngularJS中嘗試執行的操作遇到了問題。 事情是這樣的：

我有一個控制器，並且有一個這樣定義的指令：

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

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

        $scope.hasSomeEventOccured = function(){

            return booleanVariable
        };

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

});

然后，在其他控制器中，我要訪問該函數hasSomeEventOccured ...該控制器的定義如下：

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(); 我認為發生這種情況是因為對hasSomeEventOccured的moduleSomethingController發生在與someEvent綁定完成之前。

我的問題是您如何解決這個問題？

我知道，在指令中您將具有以下內容：

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

但是如何在我的情況下實現諸如等待綁定完成之類的功能？

Answer 1

如此-之所以收到“未定義$ scope.someEventApi”錯誤，是因為您沒有在任何地方進行設置。 它是不確定的！ 您在控制器內部使用的所有東西都應該被定義（var x = something ...）或注入（就像您在示例中注入$ scope一樣）

我的看法是，您有兩種選擇來獲得想要的東西：

1. 一種常見而直接的方法是在控制器內部定義函數，然后將該函數發送到指令。 這意味着您需要添加以下指令定義：

scope: {theEventOccured: '&' }

＆符號表示它是一個功能。

在您的控制器內：

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

這樣-API實際上是在您的控制器中定義的，該指令在需要時使用它。

1. 對於更復雜的東西，您可以創建一個.factory並將其綁定到您的控制器和指令。

2. 如果您嘗試在不同的控制器（或指令的控制器）之間進行通信，則可以使用工廠事件或$ broadcast事件。 請參閱作用域api中的 $ broadcast和$ emit

還有兩點重要的事情：通常，如果我了解要實現的目標，則不應在父控制器作用域中使用指令的功能，這里不需要$ observe。