angularjs 如何将控制器的范围属性传递给自定义指令?

7kqas0il  于 12个月前  发布在  Angular
关注(0)|答案(4)|浏览(118)

基本设置:

我有一个模态表单,里面有一个自定义指令(子元素)。自定义指令是一个按钮。模态也包括一个输入复选框。

最终目标:

每当复选框被选中时,自定义指令/按钮元素应该被启用。如果复选框被取消选中,自定义指令/按钮应该被禁用。

到目前为止,我的想法是:

在'modalController'中,我在复选框输入上放置了一个ng-model,以动态更改变量(ismap)的值。当输入被选中时,它将$scope. ismap值设置为true,当它未被选中时,$scope. ismap值为false。
为了禁用按钮,我会将modalController中的“iskey”值传递给自定义指令,在自定义指令中,它的值可以放在指令模板中按钮上的ng-checked表达式中(见下文)。

  • 问题 *

当我尝试这个解决方案时,控制台日志显示一个错误,说“inputCheck is not defined”。这在页面加载时就会发生,所以在用户甚至可以单击复选框之前,控制台日志就被打印出来了。关于如何实现这一点,有什么想法吗?
Modal html:

<div ng-controller= "modalController">
    <input type="checkbox" ng-model="isChecked">
    <button-directive inputCheck="isChecked"></button-directive>
  </div>

字符串
ButtonDirective.js:

angular.module('starter').directive('buttonDirective', function ($uibModal) {
    return {
        restrict: "EA",
        templateUrl: "app/directives/button-directive.html",
        scope: {
          inputCheck: "@"    
        },
        controller: ['$scope', function ($scope) { 
                  console.log(inputCheck);
         }]
     };
});


button-directive.html:

<button ng-checked="inputCheck">

wyyhbhjk

wyyhbhjk1#

你做错了。$scope变量与指令的范围声明不同。
每个子元素,包括指令,都在$scope作用域中,明白了吗?
所以你的指令声明不需要这个作用域,删除它。

angular.module('starter').directive('buttonDirective', function ($uibModal) {
    return {
        restrict: "EA",
        templateUrl: "app/directives/button-directive.html"
     };
});

字符串
和你的模态,不需要传递你的inputCheck属性。

<div ng-controller= "modalController">
    <input type="checkbox" ng-model="isChecked">
    <button-directive></button-directive>
  </div>


那么你的指令html就变成了

<button ng-checked="isChecked">


看到这个
https://plnkr.co/edit/icaufi3LJxTnbTOkmxdb

j1dl9f46

j1dl9f462#

像你那样工作。
你传递的属性错误,angularjs有一个不好的事情IMO,那就是当你传递值给像inputCheck这样的指令时,你必须用hiphen写不同的值,所以它需要是input-check

<button-directive input-check="isChecked"></button-directive>

字符串
并且作用域声明必须使用等号

scope: {
  inputCheck: "="    
},


https://plnkr.co/edit/5jlHaE0fvhoDPi2h8XGq?p=preview

dwthyt8l

dwthyt8l3#

您应该做以下更改:

<button-directive input-check="isChecked"></button-directive>

scope: {
  inputCheck: "="    
}

<button ng-disabled="inputCheck">

字符串

1u4esq0p

1u4esq0p4#

当您用途:

return {
   scope: { varName: '='  or '@'
},
controller: function($scope){
    console.log($scope.varName);   // anything from RETURN -> SCOPE gets automatically inserted into $scope
}

字符串

相关问题