Angularjs 动态添加具有唯一作用域的指令

在阅读了几个问题和答案并实施和组合它们之后，我几乎达到了我想要的程度。但最后一步伤到了我的头

说到我的观点：我的目标是动态（onclick）添加一个具有唯一作用域的指令。我得到的最接近的结果如下所示：

这个Plunker是在这个答案的基础上进一步构建的：

目标是每个计时器都可以单独更改，现在动态添加的计时器相互链接，并与计时器1链接。定时器2是独立的。当我从计时器1按下“向上”或“向下”按钮时，动态添加的计时器也会改变（反之亦然）

守则：

index.HTML

<div ng-app="myApp" data-ng-controller="myController">

<div id="timer-container">
  <h1>Times</h1>
  <strong>Timer 1</strong> – I would like this to use the 'Time' scope item
  <br>
  <time value="Time"></time>
  <br>
  <br>
  <strong>Timer 2</strong> – I would like this to use the 'altTime' scope item
  <br>
  <time value="altTime"></time>
  <br>
  <br>

</div>
<br>
<a class="btn btn-default" data-ng-click="data.addTimer();">Add Timer</a>  
</div>

<br>
<span class="time">{{ Time | timeFilter }}</span>
<div class="btn-group btn-group-sm">
  <button class="btn btn-default" ng-click="Time = Time + 1">
    <i class="fa fa-caret-up"></i>
  </button>
  <button class="btn btn-default" ng-click="Time = Time - 1">
    <i class="fa fa-caret-down"></i>
  </button>
</div>
<br>

time.HTML

<div ng-app="myApp" data-ng-controller="myController">

<div id="timer-container">
  <h1>Times</h1>
  <strong>Timer 1</strong> – I would like this to use the 'Time' scope item
  <br>
  <time value="Time"></time>
  <br>
  <br>
  <strong>Timer 2</strong> – I would like this to use the 'altTime' scope item
  <br>
  <time value="altTime"></time>
  <br>
  <br>

</div>
<br>
<a class="btn btn-default" data-ng-click="data.addTimer();">Add Timer</a>  
</div>

<br>
<span class="time">{{ Time | timeFilter }}</span>
<div class="btn-group btn-group-sm">
  <button class="btn btn-default" ng-click="Time = Time + 1">
    <i class="fa fa-caret-up"></i>
  </button>
  <button class="btn btn-default" ng-click="Time = Time - 1">
    <i class="fa fa-caret-down"></i>
  </button>
</div>
<br>

{{Time | timeFilter}}

您的

时间

指令已被写入以创建隔离作用域。因此，我认为更好的方法是在表示计时器的对象列表上重复：

<div id="timer-container">
  <div ng-repeat="timer in timers">
    <time value="timer.time"></time>
  </div>
</div>

---

签出。

您的

时间

指令已写入以创建隔离作用域。因此，我认为更好的方法是在表示计时器的对象列表上重复：

<div id="timer-container">
  <div ng-repeat="timer in timers">
    <time value="timer.time"></time>
  </div>
</div>

---

签出。

每次为您的应用程序使用正确的型号，在这种情况下，您必须通过以下方式更改型号：

要在视图中使用

ng repeat

，必须创建数组

ng repeat帮助您为您的模型制作地图，并使用您的语言帮助您创建新的范围

为什么要使用数组？ 使用数组总是好的（对于类似的情况）

当您想要处理列表时，数组可以帮助您在最后获得对象的正确值

控制器

app.controller('myController', function($scope, $compile, $http, $timeout) {

$scope.data = [
{title: "Time 1", time: 150},  
{title: "Time 2", time: 125},
];

$scope.template;

$http.get('time.html').then(function(res){
  $scope.template = res.data;   

});

$scope.addTime = function (){      
  $scope.data.push({
    title: "Time " + ( $scope.data.length + 1),
    time: 100

  })
}

});

查看

<div id="timer-container">

  <ul>
    <li ng-repeat="item in data">
      <h1>{{item.title}}</h1>
      <time value="item.time"></time>
    </li>

  </ul>
</div>
<br>
<a class="btn btn-default" data-ng-click="addTime()">Add Timer</a>

{{item.title}




每次为您的应用程序使用正确的型号，在这种情况下，您必须通过以下方式更改型号：


要在视图中使用
ng repeat
，必须创建数组

ng repeat帮助您为您的模型制作地图，并使用您的语言帮助您创建新的范围

为什么要使用数组？
使用数组总是好的（对于类似的情况）

当您想要处理列表时，数组可以帮助您在最后获得对象的正确值

控制器

app.controller('myController', function($scope, $compile, $http, $timeout) {

$scope.data = [
{title: "Time 1", time: 150},  
{title: "Time 2", time: 125},
];

$scope.template;

$http.get('time.html').then(function(res){
  $scope.template = res.data;   

});

$scope.addTime = function (){      
  $scope.data.push({
    title: "Time " + ( $scope.data.length + 1),
    time: 100

  })
}

});

查看

<div id="timer-container">

  <ul>
    <li ng-repeat="item in data">
      <h1>{{item.title}}</h1>
      <time value="item.time"></time>
    </li>

  </ul>
</div>
<br>
<a class="btn btn-default" data-ng-click="addTime()">Add Timer</a>





{{item.title}




与公认的答案类似，这一答案也有效，但出于文档目的；对于我们的“stackoverflowers”同伴，我接受了Maher的答案。与接受的答案一样，这个答案也有效，但出于文档目的；对于我们的“stackoverflowers”同伴，我接受了Maher的回答。谢谢，这就是我要找的！谢谢，这就是我要找的！