AngularJS-将函数传递到指令_Angularjs

AngularJS-将函数传递到指令

angularjs

AngularJS-将函数传递到指令,angularjs,Angularjs,我举了一个angularJS的例子 <div ng-controller="testCtrl"> <test color1="color1" updateFn="updateFn()"></test> </div> <script> angular.module('dr', []) .controller("testCtrl", function($scope) { $scope.color1 = "color";

我举了一个angularJS的例子

<div ng-controller="testCtrl">

<test color1="color1" updateFn="updateFn()"></test>
</div>
 <script>
  angular.module('dr', [])
.controller("testCtrl", function($scope) {
    $scope.color1 = "color";
    $scope.updateFn = function() {
        alert('123');
    }
})
.directive('test', function() {
    return {
        restrict: 'E',
        scope: {color1: '=',
                updateFn: '&'},
        template: "<button ng-click='updateFn()'>Click</button>",
        replace: true,
        link: function(scope, elm, attrs) { 
        }
    }
});

</script>
</body>

</html>


角度模块（'dr'，[]）
.controller（“testCtrl”，函数（$scope）{
$scope.color1=“color”；
$scope.updateFn=函数（）{
警报（“123”）；
}
})
.directive（'test'，function（）{
返回{
限制：'E'，
作用域：{color1:'='，
updateFn:“&”}，
模板：“点击”，
替换：正确，
链接：函数（范围、elm、属性）{
}
}
});

我想当我点击按钮时，警报框会出现，但什么也不显示

有人能帮我吗？

要从隔离作用域指令内部调用父作用域中的控制器函数，请在HTML中使用

破折号分隔的属性名称，如OP所述
另外，如果要向函数发送参数，请通过传递对象调用函数：
<test color1="color1" update-fn="updateFn(msg)"></test>



JS
var-app=angular.module（'dr'，[]）；
app.controller（“testCtrl”，函数（$scope）{
$scope.color1=“color”；
$scope.updateFn=函数（msg）{
警报（msg）；
}
});
应用指令（'测试'，函数（）{
返回{
限制：'E'，
范围：{
颜色1:“=”，
updateFn:“&”
},
//对象在进行调用时被传递
模板：“
点击“，
替换：正确，
链接：函数（范围、elm、属性）{
}
}
});

在“测试”指令Html标记中，函数的属性名称不应为大小写，而应基于破折号
因此-而不是：
<test color1="color1" updateFn="updateFn()"></test>



写：
<test color1="color1" update-fn="updateFn()"></test>



这是angular用来区分指令属性（如更新fn函数）和函数之间的区别的方法。
也许我遗漏了一些东西，但尽管其他解决方案确实调用父作用域函数，但无法从指令代码传递参数，这是因为updateFn
正在使用固定参数调用updateFn（）
，例如{msg:“Hello World”}
。稍微修改一下就可以让指令传递参数，我认为这更有用
<test color1="color1" update-fn="updateFn"></test>

因此，在上面的例子中，HTML调用本地作用域callUpdate
函数，然后从父作用域“获取”updateFn，并使用指令可以生成的参数调用返回的函数
属性名称使用破折号和小写（就像其他答案所说的那样）：
然后，您可以像使用任何其他函数一样使用updateFn：
 <button ng-click='updateFn()'>Click</button>

点击

好了
 通过双向绑定传递控制器函数怎么样？然后，您可以在指令中使用它，使用方式与在常规模板中完全相同（为了简单起见，我去掉了不相关的部分）：

角度模块（'dr'，[]）
.controller（“testCtrl”，函数（$scope）{
$scope.updateFn=函数（msg）{
警报（msg）；
}
})
.directive（'test'，function（）{
返回{
范围：{
updateFn:'='/'='双向绑定
},
模板：“单击”
}
});

我回答了这个问题，因为我之前试过上面的方法，但不知怎么的，它不起作用。现在它工作得很好。我不得不使用“=”绑定而不是“&”，因为这不起作用。
奇怪的行为。
@jorgrc谢谢你的回答。但有一件事，“可能”部分非常重要。如果您确实有参数，您必须将其/它们也包含在模板中，并确保指定您的局部变量，例如updateFn（{msg:“Directive Args”}
，
感谢Codezilla的回答，我想询问一下绑定函数“updateFn”时的情况指令“测试”中从父范围到隔离范围，这可能吗？AngularJS中的replace
属性已被弃用：由于某种原因，参数对我来说是未定义的。@chovy我认为该参数仅在您再次调用该方法时使用过一次？第一个开括号用法似乎是angular希望传递该方法的格式，但我可能在一个objec中出错t mappingupdateFn（{msg:'my message'}）；
在指令的链接
函数中进行函数调用时必须以该格式使用。感谢您的关注。我已将其包含在我的答案中。投票赞成！：）不确定如何才能对有效的东西投反对票？？如果你要否决投票，你应该留下评论。这对我很有效。如果不需要额外的函数，只需编写ng click=“updateFn（）（'Directive Args'）”
Awwww！scope.updateFn（）（“指令参数”）！！不是scope.updateFn（“指令参数”）！！！这确实是更完美的答案@Ludwik11 sure-这是因为scope.updateFn在像这样定义时是一个返回函数（因此是（）（））的函数，这是因为我们向scope（通过html中的update fn=“updateFn”）传递了对我们想要调用的函数的引用。第一个（）调用angular以返回此引用，第二个（）调用我们的函数，并在这里传递任何参数。你为什么用“=”而不是“&”？当我尝试这个方法时，它不断地重复调用我的函数。使用“=”是错误的。我认为，唯一的问题是在第一个模板中使用括号。这将执行函数，然后绑定结果。相反，您应该只传递函数名，如下所示：updateFn=“updateFn”
错误答案。非常糟糕。这是因为您最有可能将指令传递给JS函数引用，而不是执行。将函数作为参数传递给指令update fn=“updateFn（）”
时，必须包含括号（可能还有参数）。将其作为函数引用传递将不适用于&绑定
var app = angular.module('dr', []);

app.controller("testCtrl", function($scope) {
    $scope.color1 = "color";
    $scope.updateFn = function(msg) {        
        alert(msg);
    }
});

app.directive('test', function() {
    return {
        restrict: 'E',
        scope: {
            color1: '=',
            updateFn: '&'
        },
        // object is passed while making the call
        template: "<button ng-click='callUpdate()'>
            Click</button>",
        replace: true,        
        link: function(scope, elm, attrs) {       
          scope.callUpdate = function() {
            scope.updateFn()("Directive Args");
          }
        }
    }
});

 <test color1="color1" update-fn="updateFn()"></test>

 scope: { updateFn: '='}

 <button ng-click='updateFn()'>Click</button>

<div ng-controller="testCtrl">

   <!-- pass the function with no arguments -->
   <test color1="color1" update-fn="updateFn"></test>
</div>

<script>
   angular.module('dr', [])
   .controller("testCtrl", function($scope) {
      $scope.updateFn = function(msg) {
         alert(msg);
      }
   })
   .directive('test', function() {
      return {
         scope: {
            updateFn: '=' // '=' bidirectional binding
         },
         template: "<button ng-click='updateFn(1337)'>Click</button>"
      }
   });
</script>