Question

我正在尝试编写一个指令来创建一个map组件，所以我可以编写类似的东西：

<map></map>

现在指令看起来像这样：

angular.module('myApp')
  .directive('map', function (GoogleMaps) {
    return {
      restrict: 'E',
      link: function(scope, element, attrs) {
        scope.$watch('selectedCenter', function() {
          renderMap(scope.selectedCenter.location.latitude, scope.selectedCenter.location.longitude, attrs.zoom?parseInt(attrs.zoom):17);
        });

      function renderMap(latitude, longitude, zoom){
          GoogleMaps.setCenter(latitude, longitude);
          GoogleMaps.setZoom(zoom);
          GoogleMaps.render(element[0]);
      }
    }
  };
});

问题在于指令内部的“监视”在组件的可重用性方面看起来并不是很好。所以我想最好的事情是能够做到这样的事情：

<map ng-model="selectedCenter.location"></map>

但是我不知道在自定义指令中使用angular指令是否是一件好事，或者如何在custom-directive的link函数中获取ng-model属性中指示的对象。

Answer 1

你需要做那样的事情

angular.module('myApp')
  .directive('map', function (GoogleMaps) {
    return {
      restrict: 'E',
      scope: {
        ngModel: '=' // set up bi-directional binding between a local scope property and the parent scope property 
      },

截至目前，您可以安全地查看scope.ngModel，并且在指令之外更改相关值时，您将收到通知。

请注意，将scope属性添加到我们的指令将创建一个新的隔离范围。

有关scope属性的更多详细信息，可以参考指令here周围的angular doc，特别是“指令定义对象”部分。

最后你也可以使用这个tutorial，你可以找到所有材料来实现一个指令，从你的应用程序到指令和对面的双向通信。

Answer 2

指令中没有范围声明：

HTML

<map ng-model="selectedCenter"></map>

指令

app.directive('map', function() {
    return {
        restrict: 'E',
        require: 'ngModel',
        link: function(scope, el, attrs) {              
            scope.$watch(attrs.ngModel, function(newValue) {
                console.log("Changed to " + newValue);
            });                 
        }
    };
});

Answer 3

实现这一目标的一种简单方法是执行类似

的操作

<map model="selectedCenter"></map>

并在您的指令中将监视更改为

scope.$watch(attrs.model, function() {

你很高兴

可以在自定义指令中查看范围吗？

3 个答案: