Question

我正在尝试创建一个AngularJS小部件（使用AngularJS自定义指令），通过该小部件，用户可以将小部件用作Google地图上的分支定位器。例如：

$widgetClass = 'app\widgets\My'.$widget.'Widget';
return $widgetClass::widget();

JSON数组的位置如下：

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

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

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

[
 {
   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
  }
]

这只是字符串数组，其第0个索引元素是'['不符合预期： -

 [Object object, Object object]

以下是代码段：

branchLocatorWidget.html

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

BranchLocatorDirective.js

<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>

branchLocatorTemplate.html

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
     }

});

但是，如果我尝试通过scope属性上的控制器传递相同的文字，它可以正常工作，但我的要求是避免指令的任何依赖。

Answer 1

更改

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

要

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

这个想法是使用jqLite的angular.element（）来获取对象。 jqLite是jQuery的简易版本，如果您的项目中已包含jQuery，它会自动遵循。一旦你有一个jqLite对象指向你的元素，scope()方法可以为你提供范围，这样你就可以访问它的属性。绝对不是最好的方法，因为你将角度和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";
}

通过Jquery将JavaScript数组文字传递给angularjs中的custom指令的属性

1 个答案: