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

我正在尝试编写一个指令来创建映射组件，这样我就可以编写如下内容：

<map></map>

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

问题在于，指令中的“watch”在考虑组件的可重用性方面看起来不是很好。所以我想最好的事情是能够做一些事情，比如：

<map></map>

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

---

但我不知道在自定义指令中使用角度指令是否是一件好事，或者如何在自定义指令的链接函数中获得ng模型属性中指示的对象。

实现这一点的一个简单方法是

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

---

而且你很乐意去

你需要做类似的事情

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属性添加到我们的指令将创建一个新的隔离作用域

您可以参考angular doc around指令，特别是“指令定义对象”一节，了解有关scope属性的更多详细信息

---

最后，您还可以使用此功能，您可以找到实现指令的所有材料，从应用程序到指令的双向通信和相反的双向通信。

指令中没有范围声明：

html

---

没有必要要求

ngModel

这样做。通常，如果要在指令的内部和外部世界之间转换值，则需要

ngModel

。

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