在链接附加新元素后,AngularJs绑定控制器

Question

我有一个像下面这样的指令,基本上用当前的一个附加一个新元素.并在新元素绑定ng-controller"openCntl"

explorerModule.controller("openCntl",function($scope, $dialog){
    $scope.open = function(){        
        alert('dialog closed with result: ' + result);
    };
});



explorerModule.directive('ngCustomerClick', function($parse){
    return {
        controller :  "openCntl",

        link: function(scope, element, attr){
            var alert = angular.element(
                '<div class="lp-dropdown-wrapper open"  ng-controller="dialogCntl" ' +
                '><div class="arrow"></div>' +
                '<ul class="nav nav-tabs" style="display: inline;">' +
                '<li class="add" ng-click="open()"><a tabindex="-1" href="#"><span class="icon-coffee"></span>Add</a></li>'+
                '</ul></div>'
            );
        }
    }
});

但是当我点击li时,不要在控制器"openCntl"中调用该函数,如何实现呢？

非常感谢

Answer 1

你必须使用$compile让Angular了解新元素.

解决方案的核心是:

link : function(scope, el, attrs) {
  var newElem = angular.element('<SomeNewElement/>');
  el.append(newElem);
  $compile(newElem)(scope); 
}

请参阅此使用修改后的代码版本的plunker:http://plnkr.co/edit/tOUl8CM56GSd0L3xdNQW？p = preview

注意:你的问题,你似乎认为open的openCntl将被调用,但是你的新元素都有自己的ng-controller参照dialogCntl.在您的问题中,openCntl是指令的控制器,而不是新元素的控制器.我也通过提供修正了我的傻瓜dialogCntl.