Angularjs 如何在具有隔离作用域的指令上使用ng click？

当作用域在指令上继承时，我可以让ng click工作，但在隔离时不能<代码>更新：重点是我希望将click函数定义为指令的一部分。。。我不希望将函数定义移动到其他范围。

以下是继承范围的工作示例：

这是一个范围孤立的坏例子；

（单击数字，它们在第一个示例中递增，但在第二个示例中不递增）

一些代码

HTML

<div ng-app="myApp" ng-controller="baseController">
  <my-directive ng-click="hello()" current="current"></my-directive>
</div>

具有继承范围的指令：

angular.module('myApp', [])
    .controller('baseController', function($scope) {
    $scope.current = 1;
  })
    .directive('myDirective', function() {
    return {
      link: function(scope, element, attrs) {      
        scope.hello = function() {
          scope.current++
        };
      },
      replace: true,
      scope: true,
      template: '<div><child>      <strong>{{ current }}</strong></child></div>'
    }
    })
  .directive('child', function() {
    return {
      link: function(scope, element, attrs) {
        console.log("horeee");
      }
    }
  });

angular.module（'myApp'，[]）
.controller（'baseController'，函数（$scope）{
$scope.current=1；
})
.directive（'myDirective'，function（）{
返回{
链接：函数（作用域、元素、属性）{
scope.hello=function（）{
电流范围++
};
},
替换：正确，
范围：正确，
模板：“{{current}”
}
})
.directive（'child'，function（）{
返回{
链接：函数（范围、元素、属性）{
控制台日志（“horeee”）；
}
}
});

相同的指令，但具有独立的范围：

angular.module('myApp', [])
    .controller('baseController', function($scope) {
    $scope.current = 1;
  })
    .directive('myDirective', function() {
    return {
      link: function(scope, element, attrs) {      
        scope.hello = function() {
          scope.current++
        };
      },
      replace: true,
      scope: {
        current:'='
      },
      template: '<div><child>      <strong>{{ current }}</strong></child></div>'
    }
    })
  .directive('child', function() {
    return {
      link: function(scope, element, attrs) {
        console.log("horeee");
      }
    }
  });

angular.module（'myApp'，[]）
.controller（'baseController'，函数（$scope）{
$scope.current=1；
})
.directive（'myDirective'，function（）{
返回{
链接：函数（作用域、元素、属性）{
scope.hello=function（）{
电流范围++
};
},
替换：正确，
范围：{
当前：'='
},
模板：“{{current}”
}
})
.directive（'child'，function（）{
返回{
链接：函数（范围、元素、属性）{
控制台日志（“horeee”）；
}
}
});

对于隔离指令，您可以使用

ng click=“$parent.hello（）”

而不是

ng click=“hello（）”

。很高兴在你的问题中贴钢笔

说明： 当您在元素上使用

ng click

时，它的值（

hello（）

）将相对于元素的外部范围（即示例中的控制器范围）进行计算。当您创建使用非隔离作用域的指令时，控制器的作用域将传递给

链接

函数，并且

hello

在控制器的作用域上定义

//编辑代码：

angular.module('myApp', [])
    .controller('baseController', function($scope) {
    $scope.current = 1;
    $scope.hello = () => $scope.current ++;
  })
    .directive('myDirective', function() {
    return {
      link: function(scope, element, attrs) {      
      },
      replace: true,
      scope: {
        current:'='
      },
      template: '<div><child>      <strong>{{ current }}</strong></child></div>'
    }
    })
  .directive('child', function() {
    return {
      link: function(scope, element, attrs) {
        console.log("horeee");
      }
    }
  });

angular.module（'myApp'，[]）
.controller（'baseController'，函数（$scope）{
$scope.current=1；
$scope.hello=（）=>$scope.current++；
})
.directive（'myDirective'，function（）{
返回{
链接：函数（作用域、元素、属性）{
},
替换：正确，
范围：{
当前：'='
},
模板：“{{current}”
}
})
.directive（'child'，function（）{
返回{
链接：函数（范围、元素、属性）{
控制台日志（“horeee”）；
}
}
});

将hello功能添加到控制器。让它更新current的值，并将其传递到指令的隔离范围

 .controller('baseController', function($scope) {
    $scope.current = 1;
    $scope.hello = function() {         
      $scope.current++;

    };

template: '<div ng-click="hello()">

})

---

您需要将对象从控制器传递到指令

将您的js更改为

angular.module('myApp', [])
.controller('baseController', function($scope) {
$scope.current = {};
$scope.current.val=1;
})
.directive('myDirective', function() {
return {
  link: function(scope, element, attrs) {      scope.internalcurrent= scope.current || {};
                                         //scope.internalcurrent.val=1;
    scope.internalcurrent.hello = function() {
      scope.internalcurrent.val++

    };
  },
  replace: true,
  scope: {
    current:'='
  },
  template: '<div><child>      <strong>{{ internalcurrent.val }}</strong></child></div>'
}
})
.directive('child', function() {
return {
  link: function(scope, element, attrs) {
    console.log("horeee");
  }
}
});

angular.module（'myApp'，[]）
.controller（'baseController'，函数（$scope）{
$scope.current={}；
$scope.current.val=1；
})
.directive（'myDirective'，function（）{
返回{
链接：函数（作用域、元素、属性）{scope.internalcurrent=scope.current |{}；
//scope.internalcurrent.val=1；
scope.internalcurrent.hello=函数（）{
scope.internalcurrent.val++
};
},
替换：正确，
范围：{
当前：'='
},
模板：“{{internalcurrent.val}”
}
})
.directive（'child'，function（）{
返回{
链接：函数（范围、元素、属性）{
控制台日志（“horeee”）；
}
}
});

和你的html到

<div ng-app="myApp" ng-controller="baseController">
<my-directive ng-click="hello()" current="current"></my-directive>
</div>

---

如果希望在指令中定义单击功能，则需要在模板中附加处理程序，如下所示：

template: '<div ng-click="hello()"><child><strong>{{current}}</strong></child></div>'

模板：“{{current}”

当您将处理程序附加到指令声明时（如您的示例中所示），您基本上是在告诉ng click您希望调用当前作用域（控制器的作用域）上的函数。这看起来不像是发生了什么，因为在您的工作示例中，您的函数是从myDirective中定义的，但它实际上是附加到范围的，在本例中（工作示例）是控制器的范围

---

问题是您试图调用一个未定义的函数。如果希望在隔离指令内定义逻辑，则无需传入函数引用

<my-directive current="current"></my-directive>

还有一点： 您正在使用指令的

link（）

函数。这是为DOM操作保留的。相反，在

controller

函数中定义

hello（）

controller: function ($scope) {
  $scope.hello = function() {
      $scope.current++
  }
},

不过，我认为这里有一个更大的架构问题。独立指令或组件的要点是封装自身内部的逻辑。它不应该操纵外部状态。在本例中，您正在递增一个数字。如果在应用程序的另一部分中，您希望减少一个数字，该怎么办？使用减量逻辑复制指令将导致大量代码重复

相反，您应该在控制器中定义递增或递减功能，并将其传递给指令

<my-directive change-number="increment()" current="current"></my-directive>

---

然后从模板中调用

changeNumber

。这样做非常有利于代码重用。

对不起，我误解了你的问题。在控制器的作用域上定义

hello（）

，它应该可以工作。@geoidesic这也不行。请在建议之前尝试：）tx。除非我误解了您，否则hello（）已在控制器的作用域上定义。当您使用具有隔离作用域的指令时，它将

scope: {
  current:'=',
  changeNumber: '&'
},