javascript - AngularJS - 在模板中注入(inject)变量

Question

这似乎是一个简单的问题，但在使用 Angular 几个月后，我仍在寻找一种干净的方法来实现它。

我的模板 myTimePicker.html 是在指令中定义的，所以我得到了

<myTimePicker></myTimePicker>

在我的模板中，我有一个“pickedTime”对象

我需要拾取 3 个不同的时间，但我不想为相同的代码编写 3 个模板(显然..)。我希望将其定义为函数的变量，例如:

<myTimePicker ng-***="pickedTime1 as pickedTime" ></myTimePicker>
<myTimePicker ng-***="pickedTime2 as pickedTime" ></myTimePicker>
<myTimePicker ng-***="pickedTime3 as pickedTime" ></myTimePicker>

当你编写时，这在 ng-repeat 中完美运行

ng-repeat="item in items"

您可以对不同的项目使用相同的模板，但每个项目内部都有不同的变量值。

ng-init 不是解决方案，因为在这种情况下:

<myTimePicker ng-init="pickedTime = pickedTime1"></myTimePicker>
<myTimePicker ng-init="pickedTime = pickedTime2"></myTimePicker>
...

pickedTime = pickedTime1 = pickedTime2 并且他们得到了相同的值 pickedTime2

希望我的理解很清楚，谢谢您的帮助!

Answer 1

使用自定义属性并将其与隔离范围结合使用:

<myTimePicker pickedTime="pickedTime1"></myTimePicker>
<myTimePicker pickedTime="pickedTime2"></myTimePicker>
<myTimePicker pickedTime="pickedTime3"></myTimePicker>

scope: {
    pickedTime: '='
}

这样您就可以使用 pickedTime 属性将 Controller 作用域变量注入(inject)到指令中。

<小时/>

这是一个使用字符串而不是实时的简单示例:

angular.module('myApp', [])
  .controller('Ctrl', ['$scope',
    function($scope) {
      $scope.pickedTime1 = 'First time';
      $scope.pickedTime2 = 'Second time';
      $scope.pickedTime3 = 'Third time';
    }
  ])
  .directive('myTimePicker', function() {
    return {
      template: '<p>{{pickedTime}}</p>',
      restrict: 'E',
      scope: {
        pickedTime: '='
      }
    }
  });

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="Ctrl">
  <my-time-picker picked-time="pickedTime1">1</my-time-picker>
  <my-time-picker picked-time="pickedTime2">2</my-time-picker>
  <my-time-picker picked-time="pickedTime3">3</my-time-picker>
</div>