Question

我有一个指令，它从指令范围之外获取1个变量（zone.id），并使用它来请求一个promise并在之后呈现指令范围。

此ID可以来自产品，用户等......所以我需要{{zone.id = product.id}}来分配这个，以便指令可以在之后执行某些操作。

稍后，父表单将在所有请求完成后提交包括指令范围内容在内的所有内容。

我现在正在做的是我没有隔离范围并确保父和子范围可以通信。似乎如果我隔离范围，则父范围不会获得在指令范围内呈现的内容。（右？..）

angular.module('mean.zone').directive('zonesSelect', ['Zones', function(Zones){
  return {
    templateUrl: '/zone/views/zonesselectform.html', 
    restrict : 'E', 
    scope: false,
    controller: function($scope) {

      $scope.zone = $scope.zone || {};
      $scope.zone.countries = $scope.zone.countries ||[];
      $scope.zone.country = $scope.zone.country || {};

      $scope.getStates = function(id){
        Zones.getsomething(id).then(function(states){
          // render the view here....
        });
      };
    },
  };
}]);

并且父表单模板是这样的。

<div class="form-group">
  <div ng-show='false'>
    {{zone.id = product.id}}
  </div>

  <zones-select></zones-select>
</div>

指令模板就是这样的

<select ng-change='getStates(zone.country.id)' data-ng-model='zone.country' data-ng-options="s.name for s in zone.countries" required></select>

这可以完成任务。只是它看起来非常混乱，我想知道是否：

是范围：false是否正确实现我想做的事情？
如果答案是肯定的。有没有办法摆脱屏幕上显示的变量？ {{zone.id = product.id}}

谢谢，非常感谢任何帮助。

Answer 1

答案1：是的。如果您不想创建隔离范围或新范围，则scope：false是正确的方法。但是如果你想使用zone-select指令，那么你应该考虑创建新的范围。

答案2：有一些更好的方法。如果您想在单个范围内多次使用您的指令，那么无论您做了什么都是不合适的。因为每次初始化都会删除以前的初始化。

以下是更好的方法。

指令

angular.module('mean.zone').directive('zonesSelect', ['Zones', '$parse', function(Zones, $parse){
  return {
    templateUrl: '/zone/views/zonesselectform.html', 
    restrict : 'E',
    scope: true,
    controller: function($scope, attr) {

      $scope.zone = $parse(attr.ngModel)($scope) || {};
      $scope.zone.countries = $scope.zone.countries ||[];
      $scope.zone.country = $scope.zone.country || {};

      $scope.getStates = function(id){
        Zones.getsomething(id).then(function(states){
          // render the view here....
        });
      };
    },
  };
}]);

模板

<zones-select ng-model="product"></zones-select>

Angular指令父和子范围通信

1 个答案: