Question

在阅读了几个问题和答案并实施和组合之后，我几乎就是我想成为的人。但最后一步是伤害了我的头脑。

说到我的观点：我的目标是动态（onclick）添加具有唯一范围的指令。我得到的最接近的是Plunkr：

这个Plunker在这个答案上进一步构建： How to make a directive have a unique scope item for each use

目标是每个定时器都可以单独更改，现在动态添加的定时器相互关联并与定时器1相连。定时器2是独立的。当我按下＆＃39; up＆＃39;或者＆＃39; down＆＃39;来自定时器1的按钮也会改变动态添加的定时器（反之亦然）。

代码：

的index.html

Status

JS

<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>

为time.html

var app = angular.module('myApp', []);

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

  $scope.data ={};
  $scope.Time = 150;
  $scope.altTime = 125;
  $scope.template;

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

  });
  $scope.data.addTimer = function (){      
      var referralDivFactory = $compile($scope.template);
      var referralDiv = referralDivFactory($scope);
      var containerDiv = document.getElementById('timer-container');
      angular.element(containerDiv).append(referralDiv);
  }

});

app.filter('hourMinFilter', function () {
    return function (value, max) {
      if (value == max) return 'All';
      var h = parseInt(value / 60);
      var m = parseInt(value % 60);
      var hStr = (h > 0) ? h + 'hr'  : '';
      var mStr = (m > 0) ? m + 'min' : '';
      var glue = (hStr && mStr) ? ' ' : '';
      return hStr + glue + mStr;
    };
  });

app.filter('timeFilter', function () {
    return function (value, max) {
      if (value == max) return 'All';
      var h = parseInt(value / 60);
      var m = parseInt(value % 60);
      var hStr = (h > 0) ? h >= 10 ? h  : '0' + h : '00';
      var mStr = (m > 0) ? m >= 10 ? m  : '0' + m : '00';
      var glue = (hStr && mStr) ? ':' : '';
      return hStr + glue + mStr;
    };
  });

app.directive('time', function () {
    return {
      templateUrl: 'time.html',
      restrict: 'E',
      scope: {
        Time: '=value'
      },
      link: function (scope, element, attrs) {
        element.addClass('time');
        // $compile(element)(scope);
      }
    };
  });

Answer 1

您已编写time指令以创建隔离范围。所以我认为更好的方法是重复表示计时器的对象列表：

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

控制器：

$scope.timers = [];

$scope.data.addTimer = function (){
  // Push some initial time value
  $scope.timers.push({ time: 150 });
}

查看this example。

Answer 2

每次为应用使用正确的模型，在您的情况下，您必须按照以下方式更改模型：

plnkr

您必须在视图中使用数组来使用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>

plnkr

动态添加具有唯一范围的指令

2 个答案: