AngularJS如何在自定义指令标签内部使用ng-model,将控制器设置为dinamically？

2023年4月26日 166次阅读

我最近在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标签中,它可以工作,但是会是静态的！

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

最佳答案 您已为指令创建了隔离范围,因此您无法访问已放置指令标记的控制器指令的父范围,因此您需要传递选项列表&模型名称到您的指令.

不要使用ng-model作为属性,因为对于指令元素的ues ng-model属性没有任何意义,因为它不是输入元素.相反,你可以将该属性命名为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: '='
};

我选,picker.html

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