Question

我有一个使用ng-include包含的简单组件。组件的控制器在包含的HTML中分配。我想使用相同的组件两次（或更多），但加载不同的数据。

我尝试做的是解析JSON并创建新对象（工作正常）但我无法使用它的id属性将数据分配给相应的组件。

任何帮助都会很好。指令？ jQuery的？

我知道这是一种奇怪的方式，所以我现在补充一点，项目的业务逻辑需要这种类似的行为。

JSON：

[
    {
        "componentId" : 'component1",
        "data" : "Hello"
    },
    {
        "componentId" : 'component1",
        "data" : "World"
    }
]

组件模板（someTemplate.tpl.html）

<div data-ng-controller="DefaultController">
    <h2>{{message}}</h2>
</div>

主要HTML

<div data-ng-controller="MainController">
    <div data-ng-include="'someTemplate.tpl.html'" id="component1"></div>
    <div data-ng-include="'someTemplate.tpl.html'" id="component2"></div>
</div>

控制器

function DefaultController($scope){
    var componentId = ???
    $scope.message = $scope[componentId].data;
}

主控制器

function MainController($scope, $http){
    $http.get('data.json').then(function(response){
        $scope.data = response;

        for(var i in $scope.data){
            $scope[$scope.data[i].componentId] = $scope.data[i].data;
        }
    }
}

AngularJS - 使用不同数据多次使用具有相同控制器的组件

0 个答案: