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

Question

我刚入职Angular最近，所以有一些问题。

我的问题：
例如，我创建了一个指令，我将在许多情况下使用不同的控制器 'pages'。
现在我可以很好地动态设置控制器，这个问题就解决了！
但是，在每个指令实例中，我想定义控制器中要更改的变量是什么，例如 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;
});

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

<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来定义控制器中的变量是什么。怎么可能？

Answer 1

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

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

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: '='
};

我的-select-picker.html

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

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

AngularJS how to use ng-model inside a custom directive tag, setting the controller dynamically?

angularjs

angularjs-directive

angular-ngmodel

angular-controller