属性双向绑定时AngularJS未定义对象

Question

I am running into a problem with something I'm trying to do in AngularJS. The thing goes like this:

I have a controller and I have a directive defined like this:

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

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

        $scope.hasSomeEventOccured = function(){

            return booleanVariable
        };

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

});

Then, in some other controller I want to access that function hasSomeEventOccured ... the controller is defined as follows:

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

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

}]);

And in the cshtml file I have:

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

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

The error that occasionally occurs is that $scope.someEventApi is undefined. And so this line breaks: $scope.theEventOccured = $scope.someEventApi.hasSomeEventOccured(); I assume this happens because the call to hasSomeEventOccured within the moduleSomethingController occurs before the binding with someEvent is completed.

My question is how do you solve this problem?

I am aware that in a directive you would have something like:

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

But how can I achieve something like wait for the binding to complete in my situation?

Answer 1

SO- The reason you get "$scope.someEventApi is undefined" error, is because you didn't set it anywhere. it is undefined! Everything you use inside the controller should be either defined (var x = something...) or injected (just like you injected $scope in your example)

The way i see it, you have two options to get what you want:

1. a common and straightforward way will be to define your function inside the controller and then send that function to the directive. that means you'll need to add your directive definition something like that:

scope: {theEventOccured: '&' }

the & sign means it's a function.

inside your controller:

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

this way- the API is actually defined inside your controller, and the directive uses it when needed.

1. for more complex stuff- you can create a .factory and bind it to your controller and directive.

2. if you are trying to communicate between different controllers (or controllers of directive) you can either use a factory or $broadcast an event. see $broadcast and $emit in the scope api

two other important things: usually you are not supposed to use a directive's function in it's parent controller scope if i understand what you want to achieve, you do not need $observe here.