如何在具有隔离范围的指令上使用ng-click?

问题描述

当作用域是在一个指令上继承而不是孤立时，我可以使ng-click起作用. UPDATE: The point is that I want the click function to be defined as part of the directive... moving the function definition into a different scope is not what I want.

I can get ng-click to work when the scope is inherited on a directive but not when isolated. UPDATE: The point is that I want the click function to be defined as part of the directive... moving the function definition into a different scope is not what I want.

这是继承了作用域的工作示例: https://codepen.io/anon/pen/PGBQvj

Here's the working example with inherited scope:https://codepen.io/anon/pen/PGBQvj

这是一个孤立的范围破损的例子； https://codepen.io/anon/pen/jrpkjp

Here's the broken example with isolated scope;https://codepen.io/anon/pen/jrpkjp

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

(Click the numbers, they increment in the first example but not in the second)

某些代码...

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");
      }
    }
  });

相同的指令，但作用域是孤立的:

The same directive but with isolated scope:

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");
      }
    }
  });

推荐答案

问题是您正在尝试调用未定义的函数.如果希望在隔离指令中定义逻辑，则无需传递函数引用.

The problem is you're trying to call a function that is undefined. If you wish the logic to be defined inside the isolated directive, there is no need to pass in a function reference.

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

您不能在此处通过ng-click="hello()".这是控制器的范围，因此hello()是未定义的.

You cannot pass ng-click="hello()" here. This is the scope of the controller, so hello() is undefined.

相反，将ng-click事件移至指令的模板

Instead, move the ng-click event to the template of the directive

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

另外一点:您正在使用指令的link()函数.这是为DOM操作保留的.而是在controller函数中定义hello().

One additional point:You're using the link() function of the directive. This is reserved for DOM manipulation. Instead, define hello() within the controller function.

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

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

I think there is a larger architectural problem here, though. The point of an isolated directive, or component, is to encapsulate logic internal to itself. It should not manipulate external state. In this example, you're incrementing a number. What if, in another part of your application, you wish to decrement a number? Copying the directive with decrement logic would be a lot of code duplication.

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

Instead, you should define the increment, or decrement, functionality in the controller, and pass it through to the directive.

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

然后，使用&语法将函数引用绑定到指令:

Then, use the & syntax to bind the function reference to the directive:

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

，然后从模板调用changeNumber.这样做非常有助于代码重用.

and call changeNumber from the template. Doing so very much facilitates code reuse.

这篇关于如何在具有隔离范围的指令上使用ng-click?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！