javascript - 如何在 Angular Directive(指令)(即 ng-init)r 中的字符串插值中使用对象？

Question

我有一个函数，可以创建 Angular 元素并通过 jquery 附加到容器。我想使用 ng-init。按照我的代码进行操作。

 _createItem = function (chart) {

        let item = angular.element(
          `<div class="item col-xs-4 col-sm-4 col-md-4 col-lg-4" ng-init="chart = ${chart}">


        </div>`);

        $compile(item)($scope);
        $(".grid").append(item);

      }

使用上面的代码应用程序会生成语法错误。

Answer 1

您的代码包含两个问题。首先是如何进行字符串插值。自 chart是一个对象，字符串插值机制会调用它的toString方法在完成其工作时，所以你会得到 <div class="item col-xs-4 col-sm-4 col-md-4 col-lg-4" ng-init="chart = [object Object]"></div> (带换行符)而不是您所期望的。而且，在这种情况下ng-init内容不是有效的 AngularJS 表达式。下一个问题是如何将对象传递到 AngularJS 模板中。您编译的模板绑定(bind)到特定范围，因此它只能访问范围级别的对象。注意您在答案下的评论中提到的问题，我建议为每个图表创建单独的范围。因此，您必须按如下方式更改代码:

_createItems = function () {
        const itemsData = $scope.$ctrl.chartList;
        for (let i = 0; i < itemsData.length; i++) {
             let chart = itemsData[i];
             _createItem(chart);
        }
}

_createItem = function (chart) {
        let newScope = $scope.$new(true); // if you need to inherit $scope properties, pass false here
        newScope.chart = chart;

        let item = angular.element(
          `<div class="item col-xs-4 col-sm-4 col-md-4 col-lg-4" ng-init="chart = chart">


        </div>`);

        $compile(item)(newScope);
        $(".grid").append(item);

      }

最后，我认为ng-init在这个特定的例子中没有意义，如 chart已在 newScope 中定义.