传递参数从指令Angularjs控制器功能

问题描述

我有它的孤立范围创建一个属性，回调函数AngularJs指令：

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

在该指令按钮被点击并执行 onButtonClicked 功能。这再设置一个范围的变量，并调用 $ scope.myCallBack 功能。

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.

在回调函数被执行并执行以下操作：
的console.log（$ scope.linkedVariable）;

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

问题是 $ scope.linkedVariable 尚未更新，在这个阶段的 $ scope.linkedVariable 仍是previous值。

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

当我换上述code在的setTimeout 正确的值被检索：的setTimeout（函数（）{的console.log（ $ scope.linkedVariable）}，2000）;

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

我的提问是，如何正确地传递价值的 onCallBack 功能。

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

请参见下面的完整code例如：

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://weblogs.asp.net/dwahlin/creating-custom-angularjs-directives-part-3-isolate-scope-and-function-parameters.

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.

而不是在控制器访问 $ scope.linkedVariable ，我现在接受该值作为参数传递给函数。

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

要得到这个工作，我不得不在HTML来改变函数声明：

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

数据我-回拨=vm.onCallBack

控制器函数声明：

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

该指令就可以调用类的函数：

the directive can then call the function like:

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

请看到一个更新的jsfiddle：

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

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