javascript - 通过Jquery将JavaScript数组文字传递给angularjs中自定义指令的属性

Question

我正在尝试创建一个 AngularJS 小部件(使用 AngularJS 自定义指令)，通过该小部件用户将能够使用该小部件作为谷歌地图上的分支定位器。例如:

<branch-locator id="someId" branch-info="JSON-ARRAY"></branch-locator>

JSON 数组如下所示:

[
 {
   city : 'Los Angeles',
   desc : 'This city is amazing.',
   lat : 34.0500,
   long : -118.2500
 },
 {
   city : 'Chicago',
   desc : 'This is the second best city in the world!',
   lat : 41.8819,
   long : -87.6278
  }
]

但我希望这些数据不要被硬编码，而是我想通过 jQuery 动态传递这些数据。我的意图是最终用户不必关心 AngularJS 的内部语义；使用此小部件的唯一要求是数据的可用性。

现在，我的问题是，将数据传递给指令会产生如下字符串:

 [Object object, Object object]

这只是第 0 个索引元素为“[”的字符串数组，不符合预期:-

{
   city : 'Los Angeles',
   desc : 'This city is amazing..',
   lat : 34.0500,
   long : -118.2500
}

以下是代码片段:

branchLocatorWidget.html

<script>
    $(function(){
         var cities = [
                          {
                              city : 'Toronto',
                              desc : 'This is the best city in the world!',
                              address : '',
                              lat : 43.7000,
                              long : -79.4000,
                          },
                          {
                              city : 'New York',
                              desc : 'This city is aiiiiite!',
                              address : '',
                              lat : 40.6700,
                              long : -73.9400
                          },
                          {
                              city : 'Chicago',
                              desc : 'This is the second best city in the world!',
                              address : '',
                              lat : 41.8819,
                              long : -87.6278
                          },
                          {
                              city : 'Los Angeles',
                              desc : 'This city is live!',
                              address : '',
                              lat : 34.0500,
                              long : -118.2500
                          },
                          {
                              city : 'Las Vegas',
                              desc : 'Sin City...\'nuff said!',
                              address : '',
                              lat : 36.0800,
                              long : -115.1522
                          }
                  ];


        $("branch-locator#someId").attr("branch-info",cities);

    });
</script>
<div>
    <branch-locator id="someId" branch-info=""></branch-locator>

</div>

BranchLocatorDirective.js

var uniqueId = 1;
var modified_id = "mapId";
define(["app"], function(app) {
    var modulename = 'branchLocator';

    angular.module("branchLocator", []).directive('branchLocator', function() {
        return {
            restrict: 'E',
            replace: true,
            scope: {
                branchInfo : "@",
                id : "@"
            },
            link: linkFunction,
            templateUrl: 'js/widget/directives/branchLocator/template/' + modulename + 'Template.html',
        };
    });

    var linkFunction = function(scope, element, attrs){
        var cities = eval(scope.branchInfo);
        console.log("From Directive: "+cities);
        console.log("Array Property: "+cities[0].city);
        console.log("Array Length: "+cities.length);
        scope.uniqueId = '_'+uniqueId++;
        modified_id = modified_id + scope.uniqueId;
        modified_id = element.find('div').attr('id' , modified_id).attr("id");
        plotMap(modified_id, cities, scope);
    }

    var plotMap = function(modified_id, cities, scope){
        // logic to plot locations on the google map
     }

});

branchLocatorTemplate.html

<div>
    <div id="mapId{{::uniqueId}}"></div>
</div>

但是，如果我尝试通过作用域属性上的 Controller 传递相同的文字，它可以正常工作，但我的要求是避免指令产生任何依赖关系。

Answer 1

改变

$("branch-locator#someId").attr("branch-info",cities);

至

angular.element("branch-locator#someId").scope().branchInfo = cities;

这个想法是使用 jqLit​​e 的 angular.element() 来获取对象。 jqLit​​e 是 jQuery 的精简版，如果您的项目中已经包含 jQuery，它会自动遵循该版本。一旦 jqLit​​e 对象指向您的元素，scope() 方法就可以为您提供该元素的范围，以便您可以访问它的属性。绝对不是最好的方法，因为您将 Angular 和 jQuery 世界结合在一起。如果可以的话，避免它。

此外，优秀的开发人员会添加一些良好的检查。

var branchScope = angular.element("branch-locator#someId").scope();

if (typeof branchScope != "undefined") {
 branchScope.branchInfo = cities;
} else {
 throw "I could not find the scope of branch element";
}