Angular指令调用另一个指令不起作用

时间:2017-01-19 13:01:52

标签: angularjs angularjs-directive

In this plunk我有指令dir1按照here所述调用指令dir2中的方法。

问题是scope.dir2Ctl中的控件对象(dir1)为空,我得到TypeError: scope.dir2Ctl.call2 is not a function。任何想法如何解决这个问题?

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;
              };
        }
    }
});

0 个答案:

没有答案