AngularJS如何在自定义指令标签中使用ng-model，动态设置控制器？答案

【问题标题】：AngularJS how to use ng-model inside a custom directive tag, setting the controller dynamically?AngularJS如何在自定义指令标签中使用ng-model，动态设置控制器？
【发布时间】：2015-12-14 19:09:49
【问题描述】：

我最近开始使用 Angular，所以我有一些问题。

我的问题：
例如，我创建了一个指令，我将在每种情况下使用不同的控制器在许多“页面”中使用它。
现在我可以很好地动态设置控制器，这个问题得到了解决！
但是，在每个指令实例中，我想定义控制器中要更改的变量是什么，例如ng-model。如果我直接放在模板中的标签内，它可以工作，但我需要它动态。

指令：

app.directive('mySelectPicker', function () {
var ddo = {};
    ddo.restrict = 'E';
    ddo.templateUrl = 'js/directives/views/my-select-picker.html';

    ddo.scope = {};
    ddo.controller = "@";
    ddo.name = "controllerName";

    return ddo;
});

MY-SELECT-PICKER.HTML：
OBS1：（ng-repeat 与时间控制器数组中的值完美配合） OBS2：如果我将ng-model 放在选择标签中，它可以工作，但会是静态的！

<select>
    <option value="{{time.value}}" ng-repeat="time in times" >{{time.text}}</option>
</select>

控制器：

app.controller('MyController', function($scope, moment){
    $scope.times = []; //array with the options
    $scope.val1 = '';
    $scope.val2 = '';
});

使用指令：

<my-select-picker controller-name="MyController" **ng-model="val1"**></my-select-picker>
<my-select-picker controller-name="MyController" **ng-model="val2"**></my-select-picker>

在简历中，我需要在每个<my-select-picker> 中定义ng-model 来定义控制器中的变量是什么。怎么可能？

【问题讨论】：

标签： angularjs angularjs-directive angular-ngmodel angular-controller

【解决方案1】：

您已经为指令创建了隔离作用域，因此您无法访问放置指令标记的控制器指令的父作用域，因此您需要将选项列表和模型名称传递给您的指令。

不要使用ng-model 作为属性，因为在指令元素上使用ng-model 属性没有任何意义，因为它不是输入元素。相反，您可以将该属性命名为 model 和 list 然后在您的隔离指令中定义 model 和 list 属性。这两个属性都将使用=，以便它可以轻松地执行双向绑定。您也可以使用ng-options 代替ng-repeat 选项渲染，因为ng-options 可以在选择时将对象绑定到ng-model。

HTML

<my-select-picker list="times" controller-name="MyController" model="val1"></my-select-picker>
<my-select-picker list="times" controller-name="MyController" model="val2"></my-select-picker>

指令

ddo.scope = {
   model: '=',
   list: '='
};

my-select-picker.html

<select ng-model="model" ng-options="l.value as l.text for l in list"></select>

【讨论】：