Question

我是angularjs的新手，我一直在阅读大量的文档，阅读各种文章和教程以及视频，以帮助我解决这些问题。我试图获得两个指令来交换他们之间的信息。我正在尝试做的一个非常简化的版本是odetocode（http://odetocode.com/blogs/scott/archive/2013/09/11/moving-data-in-an-angularjs-directive.aspx），其中k scott allen用一个具有ng-controller属性的div包装了他的指令，它运行得很漂亮。

我正在进行一项稍微复杂的测试，我试图让它与我提到的代码类似地工作。

当我在每个指令的实际模板中列出ng-controller属性时，我的两个指令相互通信。它有效，但我不认为这是正确的。实际的控制器代码运行两次，每个指令一次。当我将控制器移动到包含两个指令的div时，两个指令停止交互（位置选择器模板中的更改事件不会更改控制器中的停放）。我很确定它与范围有关。如果有人能指出我正确的方向，或者我应该在哪里寻找信息，那将非常感激。

这是我的小提示，显示我的代码http://jsfiddle.net/jgbL9/25/

<div ng-app="myApp">
    <location-selector ></location-selector ><br/>
    <portal-map ></portal-map >
</div>


    var App = angular.module('myApp', ['ngResource']);

    App.directive('locationSelector',['parkList', function(parkList) {
      return {
        restrict: 'E',
        scope: {
          parkId : '=',
          parkName : '='
        },
        template: '<select ng-controller="portalMapCtrl"'+
             ' ng-model="listParks" ng-change="changePark()" '+
             ' park-id="parkId" park-name="parkName" ' +
             ' ng-options="park as park.attributes.NAME for park in Parks" >'+
             '</select>',
        link: function (scope,element,attrs){
          parkList.getListFromGIS().success(function(data) {
            scope.Parks = data.features;
          });
        }
      };
    }]);

    App.directive('portalMap', function(){
      return {
        restrict: 'E',
        scope:{
          parkId: "=",
          parkName: "="
        },
        template: '<style type="text/css" media="screen">'+
            '#mapCanvas {height: 500px; width:75%; border:thin black solid; }'+
            '</style>'+
            '<div id="mapCanvas" park-id="parkId" park-name="parkName"  ng-controller="portalMapCtrl" ></div>'
      }
    });


    App.controller('portalMapCtrl',['$scope','parkList', function( $scope, parkList ){
      var map = {};
      var STREETMAPSERVICE = "https://gis.odot.state.or.us/ArcGIS/rest/services/BASEMAPS/Basemap_Streets/MapServer";
      var FOTOSSERVICE = "https://maps.prd.state.or.us/arcgis/rest/services/ESRI_TEST/MapServer?f=jsapi";
      var UTILSSERVICE = "http://gis.prd.state.or.us/ArcGIS/rest/services/OPRDAssets/MapServer";
      var UTILSSERVICE_PARKLAYER = 0;
      var UTILSSERVICE_STRUCTUREPOLY = 7;
      var UTILSSERVICE_SURFACE = 11;
      var UTILSSERVICE_PARCELS = 12;
      var timer;
      var ALL_LAYERS = [UTILSSERVICE_PARKLAYER,UTILSSERVICE_STRUCTUREPOLY,UTILSSERVICE_SURFACE,UTILSSERVICE_PARCELS];
      $scope.parkId = 0;
      $scope.parkName = "";
      $scope.changePark = function (){
        require(["esri/SpatialReference","esri/geometry/Polygon"],
          function(SpatialReference,Polygon){
            console.log('change park');
            $scope.parkId = $scope.listParks.attributes.PARK_HUB_ID;
            $scope.parkName = $scope.listParks.attributes.NAME;
            parkList.getParkFromGIS($scope.parkId).then(function(data){
               var x = data.data;
               var y = x.features[0];
               var rings = y['geometry'];
               var poly = new Polygon(rings);
               var xtnt = poly.getExtent();
               var sr = new SpatialReference({wkid:2992});
               xtnt.setSpatialReference (sr);
               map.setExtent(xtnt,true);
            });
          });
         };
       function addService(srvc, srvcType, lyrId){require([
               "esri/layers/ArcGISTiledMapServiceLayer",
                "esri/layers/ArcGISDynamicMapServiceLayer",
                "esri/layers/ImageParameters"], function(Tiled,Dynamic,Parameters){
           var mapService = {};

           if(srvcType == 'Tiled'){
             mapService = new Tiled(srvc);
           }else{
             var imageParameters = new Parameters();
             imageParameters.layerIds = lyrId;
             imageParameters.transparent = true;
             mapService = new Dynamic(srvc,{"imageParameters":imageParameters});
           }
           map.addLayer(mapService);
          });
        }

      function createMap(){
        require(["esri/map"],function(Map){
          console.log('create map');
          map = new Map("mapCanvas");
          addService(STREETMAPSERVICE,'Tiled');
          addService(FOTOSSERVICE,'Tiled');
          addService(UTILSSERVICE,'Dynamic',ALL_LAYERS);
        });
      }
      createMap();

   }]);


   App.factory('parkList',['$http', function($http) {
     return {
       getListFromGIS: function() {
         var myUrl = 'http://maps.prd.state.or.us/arcgis/rest/services/ESRI_TEST/MapServer/0/query?where=OBJECTID+%3E+0&geometryType=esriGeometryEnvelope&spatialRel=esriSpatialRelIntersects&outFields=PARK_HUB_ID%2CNAME&returnGeometry=false&&returnIdsOnly=false&returnCountOnly=false&orderByFields=NAME&returnZ=false&returnM=false&returnDistinctValues=true&f=pjson&callback=JSON_CALLBACK';
         return $http ({ url: myUrl, method: 'JSONP'});
        },
        getParkFromGIS: function (id){
          var myUrl = "http://maps.prd.state.or.us/arcgis/rest/services/ESRI_TEST/MapServer/0/query?where=PARK_HUB_ID%3d"+id+"&f=pjson&callback=JSON_CALLBACK";
          return $http ({ url: myUrl, method: 'JSONP'});
        },
        JSON_CALLBACK: function(data) {}
     };
    }]);

（这是使用每个指令模板中列出的ng-controller的代码）。

我希望提供有关我的代码结构或代码选择的任何其他意见或建议，正如我所提到的，我正在学习，我学到的东西越多，我就会有更多的编码。

Answer 1

我认为由于您的指令中的隔离范围（链接功能中的scope: { }）而导致您遇到问题。

我建议将模板内联到您的应用程序中，而不是试图使它们成为指令。

特别是，locationSelector很难做出指令 - 通常更容易让输入元素成为其控制器所在元素的一部分。

如果您确实希望将它们作为指令，我建议将listParts值传递给changePark函数：

<select ... ng-change="changePark(listParks)" ...>

angularjs指令通信

1 个答案: