如何在角度指令（即ng-init）r中的字符串插值中使用对象？

Question

我有一个函数，它创建角元素并通过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模板中。 您的已编译模板绑定到特定范围，因此只能访问范围级对象。 请注意您在答案下方的评论中提到的问题，我建议为每个图表创建单独的范围。 因此，您必须按以下方式更改代码：

_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定义。