从指令中的链接调用控制器函数

时间:2015-12-09 14:36:11

标签: angularjs angular-directive

我正在编写一个Angular 1.5.0-beta2项目。

我想从返回对象的link属性调用控制器函数。

这意味着......

angular.module('myalcoholist').directive("ngFileSelect",function() {

    return {
        controller: 'AddCoctailController',
        controllerAs: 'addCocktail',
        link: function ($scope, el) {

            el.bind("change", function (e) {

                var file = (e.srcElement || e.target).files[0];
/*THIS DOES NOT WORK */      addCocktail.getFile(file);
            })

        }

    }
});

正如您在此处所见,我试图运行一个名为getFile的控制器函数。

甚至可能吗?

3 个答案:

答案 0 :(得分:6)

如果您使用角度> = 1.3,请使用bindToController选项

angular.module('myalcoholist').directive("ngFileSelect",function() {

    return {
        controller: 'AddCoctailController',
        controllerAs: 'addCocktail',
        bindToController: true,
        link: function (scope, el) {

            el.bind("change", function (e) {

                var file = (e.srcElement || e.target).files[0];
                scope.addCocktail.getFile(file);
            });

        }

    }
});

codepen:http://codepen.io/gpincheiraa/pen/VeYxGN

答案 1 :(得分:2)

控制器是填充$ scope并且链接在控制器之后运行,因此您只需访问链接函数中范围内的任何内容。

angular.module('app', [])
  .directive('tstDrv', function () {
      return {
          restrict: 'E',
          template: '<div>{{hello}}</div>',
          link: function (scope) {
              console.log(scope.hello);
              scope.hello = "hello again";
          },
          controller: function ($scope) {
              $scope.hello = 'tst';
          }
      }
  })

此SO问题也与Angular: calling controller function inside a directive link function using &

有关

如果想要访问已在当前指令范围之外定义的范围属性,则它全部依赖于“域定义对象”的范围属性。

参考。 https://github.com/angular/angular.js/wiki/Understanding-Scopes#javascript-prototypal-inheritance

答案 2 :(得分:1)

在上面添加Chris的答案 - link有几个参数(范围,元素,attrs,控制器)。您可以访问附加的控制器功能,执行以下操作:

link: function(scope, elem, attrs, ctrl){
    ctrl.func_to_call();
}