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。

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

1 个答案: