0

In this plunk I have directive dir1 calling a method in directive dir2 as described here.

The problem is that the control object (scope.dir2Ctl) is empty in dir1 and I get TypeError: scope.dir2Ctl.call2 is not a function. Any ideas how to fix this?

HTML

  <body ng-app="myModule" ng-controller="ctl">
    <dir1 x1="1"></dir1>
  </body>

Javascript

angular.module("myModule", [])
.controller('ctl', function($scope) {})

.directive('dir1', function ($timeout) {
    return {
        restrict: 'EA',          
        scope: {
            x1: '='         
        },
        template: '<p>x2 should be 2 = {{x2}} </p>' + 
             '<dir2 control="dir2Ctl"></dir2>',

        link: function (scope, element, attrs) { 
              scope.dir2Ctl = {};
              $timeout(function(){
                  console.log(scope.dir2Ctl)
                  scope.x2 = scope.dir2Ctl.call2();
              },1000);
        }
    }
})

.directive('dir2', function () {
    return {
        restrict: 'EA',          
        scope: {
            control: '='         
        },
        template: '<p>some text in dir2</p>',
        link: function (scope, element, attrs) { 
              scope.control = scope.control || {};
              scope.control.call2 = function(){
                 return 2;
              };
        }
    }
});
Community
  • 1
  • 1
ps0604
  • 1,227
  • 23
  • 133
  • 330
  • It's not really clear what you are trying to do here; However, of course `control` would be an empty object; You set `control="dir2Ctl"`, set `scope.dir2Ctl = {}` in the `link`, and then never set it to anything else. – Claies Jan 19 '17 at 13:10
  • I need to call method `call2` in `dir1`. Since I declared `control="dir2Ctl"` I am linking `scope.control` in `dir2` with `scope.dir2Ctl` in `dir1`, they are the same object. – ps0604 Jan 19 '17 at 13:13
  • but they aren't, because you re-initialized it to `{}` in the link. remove that first line in the link, and this will work. – Claies Jan 19 '17 at 13:17
  • better do like this: http://plnkr.co/edit/ERIquSWHRPrGMdDZPOGs?p=preview – Petr Averyanov Jan 19 '17 at 13:19
  • @Claies it worked – ps0604 Jan 19 '17 at 13:23
  • it worked in angular 1.2 - now you try angular 1.6 – Petr Averyanov Jan 19 '17 at 13:26
  • @Claies In this [plunk](http://plnkr.co/edit/KULuwD4gSn0HKFws9bak?p=preview) I am using `pre-link` to initialize `scope.dir2Ctl`, if I remove it as you suggested it works however the object is not initialized, I don't understand how `dir2` can declare the `call2` function if it's not initialized. – ps0604 Jan 19 '17 at 17:24
  • I think you are confused about the order of the postlink processing. In the first example, where both are using postlink, the inner directive is linked first, and `scope.control` is "initialized" in the `scope.control = scope.control || {};` line, then passed passed out by the two way binding. the outer directive is then linked, and `scope.dir2Ctl = {};` *overwrites* the object already initialized. the object never really needed to be initialized in the outer directive at all. – Claies Jan 19 '17 at 20:05
  • in the second version, where the outer directive is using prelink, the situation is slightly different. First, the `pre` is run, and `scope.dir2Ctl = {};` is set, then passed in to the inner directive through two way binding. In the inner post link, `scope.control = scope.control || {};` doesn't re-initialize it because of the or clause. – Claies Jan 19 '17 at 20:08

0 Answers0