无法调用Angular指令方法

时间:2015-04-10 13:48:20

标签: angularjs angularjs-directive

我有一个Angular观点:

<div ng-include="'components/navbar/navbar.html'" class="ui centered grid" id="navbar" onload="setDropdown()"></div>
<div class="sixteen wide centered column full-height ui grid" style="margin-top:160px">
    <!-- other stuff -->
    <import-elements></import-elements>
</div>

这是由UI-Router控制的,它正在分配控制器,只是FYI。

此视图的控制器如下所示:

angular.module('pcfApp')
  .controller('ImportElementsCtrl', function($scope, $http, $location, $stateParams, $timeout, Framework, OfficialFramework) {

    $scope.loadOfficialFrameworks();

    // other stuff here
});

<import-elements>指令,如下所示:

angular.module('pcfApp').directive('importElements', function($state, $stateParams, $timeout, $window, Framework, OfficialFramework) {

  var link = function(scope, el, attrs) {

    scope.loadOfficialFrameworks = function() {
      OfficialFramework.query(function(data) {
        scope.officialFrameworks = data;
        $(".ui.dropdown").dropdown({
          onChange: function(value, text, $item) {
            loadSections($item.attr("data-id"));
          }
        });
        window.setTimeout(function() {
          $(".ui.dropdown").dropdown('set selected', data[0]._id);
        }, 0);
      });
    }

  return {
    link: link,
    replace: true,
    templateUrl: "app/importElements/components/import_elements_component.html"
  }

});

我的印象是我能够以这种方式从我的控制器调用指令的loadOfficialFrameworks()方法(因为我没有指定隔离范围),但是我在控制器上遇到方法未定义错误。我在这里缺少什么?

2 个答案:

答案 0 :(得分:2)

问题是您的控制器功能在链接功能运行之前运行,因此当您尝试调用它时,loadOfficialFrameworks尚不可用。

试试这个:

angular.module('pcfApp')
  .controller('ImportElementsCtrl', function($scope, $http, $location, $stateParams, $timeout, Framework, OfficialFramework) {
    //this will fail because loadOfficialFrameworks doesn't exist yet.
    //$scope.loadOfficialFrameworks();

    //wait until the directive's link function adds loadOfficialFrameworks to $scope
    var disconnectWatch =  $scope.$watch('loadOfficialFrameworks', function (loadOfficialFrameworks) {
        if (loadOfficialFrameworks !== undefined) {
            disconnectWatch();
            //execute the function now that we know it has finally been added to scope   
            $scope.loadOfficialFrameworks();
        }
    });
});

这里有一个小例子:http://jsfiddle.net/81bcofgy/

答案 1 :(得分:0)

指令范围和控制器范围是两个不同的对象 你应该在CTRL中使用 $scope.$broadcast('loadOfficialFrameworks_event');

//并在指令

scope.$on('loadOfficialFrameworks_event', function(){
scope.loadOfficialFrameworks(); 

})