如何将.component（）分配给隔离的范围对象，并在其模板中访问它

Question

我面前有一项艰巨的任务，因为我对AngularJS很新。任何帮助或建议将不胜感激。 因此，我想要实现的目标是让A控制器循环遍历一个对象数组，对于每个对象“编译”或“插入”一个组件，这些子组件中的每一个都具有它们的隔离范围是[i] - 对象。

我让组件显示模型中的对象值，但不是来自隔离范围。插值将标记显示为字符串，但在其中应该获得一些值。

所以我在搞清楚方面遇到了一些麻烦，我怎么能做到这一点。

以下是组件的代码：

 angular.module('MpWatchModule').component('mPoint', {
    bindToController: false,
    templateUrl: '/NG-MPWatch/Templates/mPoint.html',
    controller: MpDataController,
    bindings: {
        mpdata:'<',
    }
});

以下是模板：

<div>
   <h2>Test</h2>
    <h1>{{$ctrl.testData}}</h1>
    <h2>{{test}}</h2>
</div>

我想要显示的页面标记：

   <li>
     <m-point mpdata="{{mpd.mpData}}"></m-point>
   </li>
            <li>
                <div>
                    {{mpd.interTest}}
                </div>
            </li>

来自控制器的适当部分：

   var mpd = this;

    var subScope = {
        testData: 'this is a test',
    }

    mpd.mpData = {
        test: 'object this is an other test',
        };
var templateString = '<m-point id="{{testData}}"></m-point>';
    var interTestLocal = '';

    for (var i = 0; i < 5; i++) {
        interTestLocal += templateString;

    };

    mpd.interTest = interpolate(interTestLocal)(subScope);

这是我得到的输出：

Sofar我只是修补它以使其正确，首先我想让对象成为组件的孤立范围，并从模板中访问它以显示。第二，我想循环一个对象数组并将每个对象分配给一个组件，并将其模板发送到DOM。

这些对象一旦出现在页面上，就不需要父母的任何内容，他们应该做自己的事情，并在页面加载时尽可能高效。

注意：$ scope.testData现在没有显示，因为我知道<m-point mpdata="{{mpd.mpData}}"></m-point>，它只是试图让对象进入那里。另外，它会显示主模型中的字符串。

提前谢谢。