Question

我正在学习“指令”以及它是如何有用的。下面的指令，每次点击都会增加一个（$ scope.model和scope.bind），但不起作用。

发生了什么事？我被误解了？

var app = angular.module('app', []);

app.controller('ctrl', function($scope) {
  $scope.name = 'World';
  $scope.func = function() {
    return "text";
  }
  $scope.model = 1;
});


app.directive('myComponent', function() {
  return {
    restrict: 'E',
    scope: {
      class: '@',
      bind: '=',
      expr: '&'
    },
    link: function(scope, element, attrs) {
      element.on('click', function() {
        console.log("click");
        scope.bind = scope.bind + 1;
        scope.$apply();
      })
    },
    template: 'Class: {{class}} Bind: {{bind}} Expr: {{expr()}}'
  };
})

.sampleclass {
  background: #F00;
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app" ng-controller="ctrl">
  <p>Hello {{name}}!</p>
  <my-component class="sampleclass" bind="model" expr="func()">
  </my-component>
  {{model}}
</div>

Answer 1

由于您要更新范围变量而不需要强制$digest，因此您可以使用 scope.$apply() 来强制摘要周期并更新绑定。

尝试： -

     element.on('click', function() {
        console.log("click");
        scope.bind = scope.bind + 1;
        scope.$apply();
      });

<强> Plnkr

或者，您应该使用 ng-click ，而不是使用jquery绑定事件。 ng-click将确保在运行处理程序后更新绑定。

....
  scope.increment = function(){
     scope.bind++;
    }
   },
   template: '<span ng-click="increment()">Class: {{class}} Bind: {{bind}} Expr: {{expr()}}</span>'

<强> Demo

用于更改父模型的Angular指令，如ng-model

1 个答案: