将参数从指令传递给 Angularjs 控制器函数 [英] Pass parameter to Angularjs controller function from directive

问题描述

我有一个 AngularJs 指令，它在其隔离范围内创建一个属性和回调函数:

.directive('testButton', [function () {返回 {限制:'A'，控制器:'TestDirectiveController 作为 vmDirective'，范围: {myCallBack:'&myCallBack',我的变量:'=我的变量'},模板:函数(元素，属性){return '<button data-ng-click="vmDirective.onButtonClicked(2)">Set myVariable = 2</button>';}};}])

在指令中，一个按钮被点击并执行 onButtonClicked 函数.然后设置一个范围变量并调用 $scope.myCallBack 函数.

callBack 函数被执行并执行以下操作:console.log($scope.linkedVariable);

问题是 $scope.linkedVariable 还没有更新，在那个阶段 $scope.linkedVariable 仍然是之前的值.

当我将上述代码包装在 setTimeout 中时，将检索到正确的值:setTimeout(function(){console.log($scope.linkedVariable)}, 2000);

我的问题是，如何正确地将值传递给 onCallBack 函数.

请参阅下面的完整代码示例:

 angular.module('application',[]).directive('testButton', [function () {返回 {限制:'A'，控制器:'TestDirectiveController 作为 vmDirective'，范围: {myCallBack:'&myCallBack',我的变量:'=我的变量'},模板:函数(元素，属性){return '<button data-ng-click="vmDirective.onButtonClicked(2)">Set myVariable = 2</button>';}};}]).controller("TestDirectiveController", ['$scope', function($scope){var self = this;self.onButtonClicked = 函数(值){$scope.myVariable = 值；$scope.myCallBack();};}]).controller("TestController", ['$scope', function($scope){var self = this;$scope.linkedVariable = null;self.onCallBack = function(){控制台日志($scope.linkedVariable)；setTimeout(function(){console.log($scope.linkedVariable)}, 2000);};}])

HTML:

<div data-test-button="" data-my-call-back="vm.onCallBack()" data-my-variable="linkedVariable"></div>

jsfiddle:http://jsfiddle.net/ff5ck0da/1/

解决方案

感谢 http://weblogs.asp.net/dwahlin/creating-custom-angularjs-directives-part-3-隔离范围和功能参数.

我现在不再访问控制器中的 $scope.linkedVariable，而是接受该值作为函数的参数.

为了让它起作用，我必须将 HTML 中的函数声明更改为:

data-my-call-back="vm.onCallBack"

控制器函数声明:

self.onCallBack = function(myVariable){控制台日志(我的变量)；};

然后指令可以调用函数，如:

self.onButtonClicked = function(value){$scope.myCallBack()(value);};

请查看更新的 JSFiddle:http://jsfiddle.net/ff5ck0da/9/

I have a AngularJs directive that creates a property and callback function on its isolated scope:

.directive('testButton', [function () {
  return {
    restrict: 'A',
    controller: 'TestDirectiveController as vmDirective',
    scope: {     
        myCallBack:'&myCallBack',
        myVariable: '=myVariable'
    },
    template: function (element, attrs) {
        return '<button data-ng-click="vmDirective.onButtonClicked(2)">Set myVariable = 2</button>';
    }
};}])

In the directive a button gets clicked and it executes the onButtonClicked function. This then sets a scope variable and calls the $scope.myCallBack function.

The callBack function gets executed and does the following: console.log($scope.linkedVariable);

The problem is the $scope.linkedVariable has not yet been updated and at that stage the $scope.linkedVariable is still the previous value.

When I wrap the above code in a setTimeout the correct value is retrieved: setTimeout(function(){console.log($scope.linkedVariable)}, 2000);

My Question is, how to properly pass the value to the onCallBack function.

Please see full code example below:

   angular.module('application',[])

   .directive('testButton', [function () {
      return {
         restrict: 'A',
         controller: 'TestDirectiveController as vmDirective',
         scope: {     
              myCallBack:'&myCallBack',
              myVariable: '=myVariable'
         },
         template: function (element, attrs) {
            return '<button data-ng-click="vmDirective.onButtonClicked(2)">Set myVariable = 2</button>';
         }
       };
    }])

  .controller("TestDirectiveController", ['$scope', function($scope){
       var self = this;
       self.onButtonClicked = function(value){
          $scope.myVariable = value;
          $scope.myCallBack();
       };
   }])

  .controller("TestController", ['$scope', function($scope){
      var self = this;
      $scope.linkedVariable = null;

      self.onCallBack = function(){
      console.log($scope.linkedVariable);
      setTimeout(function(){console.log($scope.linkedVariable)}, 2000);
    };
 }])

HTML:

<div data-ng-controller="TestController as vm">
   <div data-test-button="" data-my-call-back="vm.onCallBack()" data-my-variable="linkedVariable"></div>
</div>

jsfiddle: http://jsfiddle.net/ff5ck0da/1/

解决方案

I found a more acceptable/correct way of overcoming my problem thanks to http://weblogs.asp.net/dwahlin/creating-custom-angularjs-directives-part-3-isolate-scope-and-function-parameters.

Instead of accessing the $scope.linkedVariable in the controller, I now accept the value as a parameter to the function.

To get this to work I had to change the function declaration in the HTML to:

data-my-call-back="vm.onCallBack"

The controller function declaration:

self.onCallBack = function(myVariable){
    console.log(myVariable);        
};

the directive can then call the function like:

self.onButtonClicked = function(value){        
    $scope.myCallBack()(value);
};

Please see a updated JSFiddle: http://jsfiddle.net/ff5ck0da/9/

这篇关于将参数从指令传递给 Angularjs 控制器函数的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！