AngularJS 中的隔离结果

Question

我想生成一系列调用函数的按钮，我想只返回调用者按钮 div。

现在我有：

  app.directive("phone", function () {
      return {
        scope: {
          dial: "&"
        },

       template: '<input type="text" ng-model="value"> <div class="button" ng-click="dial({message:value})">prova!   </div> {{ $parent.pippo }}',
        };
    });

---

<div ng-app="phoneApp">
  <div ng-controller="AppCtrl">
      <div phone dial="callHome(message)"> </div><br><br>

和

          $scope.callHome = function (message) {
            $scope.pippo = "casa";
          };

如何隔离对呼叫者按钮的响应？

Answer 1

为您的指令分配controller 和controllerAs，这样您就可以使用单独的contex 为每个按钮创建新指令：

app.directive("phone", function () {
  function PhoneDirectiveCtrl ($scope) {
    this.$scope = $scope;
  }
  
  PhoneDirectiveCtrl.prototype.dial = function () {
    this.pippo = this.message + 'casa';
  }
  
  var tempalte = '<input type="text" ng-model="value"> <div class="button" ng-click="ctrl.dial()">prova!</div> {{ ctrl.pippo }}';
  
  return {
    controller: PhoneDirectiveCtrl,
    controllerAs: 'ctrl',
    scope: {
      message: '@'
    },
    template: template
  }
});

当您必须创建几个相同directive 的实例时，不要使用父级的$scope。

附：不要仅在$parent 控制器中定义与指令相关的方法。您应该使用您的directive 调用的专用方法创建专用controller