未调用AngularJS嵌套指令

我是angularJS的新手，我正在创建嵌套指令。 我对这篇文章有两个问题： A.为什么没有调用child指令？ B如何将映射引用（java脚本变量）传递给子指令。 任何帮助都将不胜感激

奥斯汀

这是我的宝物：

---

---

app.directive（'myGoogleMap'，函数（）{
返回{
限制：'E'，
替换：正确，
是的，
模板：“”，
范围：{
中心：'='，
缩放：'='
},
控制器：函数（）{
//现在什么都不做。。。
},
链接：函数（范围、元素、属性）{
log（“映射指令：链接函数…”）；
//我会在这里加载地图
//我还需要将map object的引用传递给circle指令。。
//var map=new google.maps.map（document.getElementById（“mapCanvas”）、mapOptions）；
}
}
});
应用程序指令（'myCircle'，函数（）{
返回{
限制：'E'，
替换：正确，
要求：“^myGoogleMap”，
范围：{
中心：'='，
strokeColor:“=”，
冲程宽度：'='
},
链接：函数（范围、元素、属性、ctrl）{
//需要引用myGoogleMap的map实例
//在这里画圆圈。。。
log（“循环指令：链接函数…”）
}
}
});

它现在可以工作了。问题出在myGoogleMap指令上， 我有transclude=true，但我没有在

上执行任何操作。 使其工作的正确代码是：

---

Austin

链接函数忽略了第四个参数，当您使用require属性时，链接函数有第四个参数，其中包含所需属性“context”link:function（scope、elem、attr、ctrls）-如果您有多个require，然后ctrls变量是一个数组。在

myGoogleMap

指令中，您添加了一个模板，并将replace设置为true。。。这将从内部删除您的

myCircle

html，因此我认为这就是它不会被调用的原因。谢谢您的帮助。我根据你的建议更新了我的代码和plunker，但仍然不起作用。还有其他想法吗？现在可以了。问题出在myGoogleMap指令上，我有transclude=true，但我没有在该指令上执行任何操作。使其工作的正确代码是：

  <my-google-map center="{latitude: 34.9876, longitude:-93.98765}" zoom="7" >
      <my-circle center="{latitude: 34.2345, longitude:-94.88765}"
                   radius="6000"
                   strokecolor="#FF0000"
                   strokeOpacity="0.8"
                   strokeWeight="2"
                   fillColor="#FF0000"
                   fillOpacity="0.35">
      </my-circle>
  </my-google-map>

app.directive('myGoogleMap', function () {
      return {
                restrict: 'E',
                replace: true,
                transclude: true,
                template: "<div ng-transclude id='mapCanvas' ></div>",
                scope: {
                    center: '=',
                    zoom: '='
                },
                controller: function() {
                   // does nothing for now...
                },
                link: function (scope, element, attrs) {
                    console.log("Map directive: Link function ...");
                    // Will load the map right here 
                    // I also need to pass the reference of map object to circle directive..
                    // var map = new google.maps.Map(document.getElementById("mapCanvas"),mapOptions);               
               }
            }
      });


  app.directive('myCircle', function () {
        return {
            restrict: 'E',
            replace: true,
            require: '^myGoogleMap',
            scope: {
                center: '=',
                strokeColor: '=',
                strokeWidth: '='
            },
            link: function (scope, element, attrs, ctrl) {
                // need to have referece to map instance of myGoogleMap
                // to draw circle right here...
                console.log("Circle directive: Link function ...")
            }
        }
  });