javascript - 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，这样您就可以为每个具有单独上下文的按钮创建新指令：

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

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

PS 不要只在$parent控制器上定义与指令相关的方法。您应该controller使用由您调用的专用方法创建专用的directive