4

我最近开始使用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>

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

4

1 回答 1

2

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

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

我的选择picker.html

<select ng-model="model" ng-options="l.value as l.text for l in list"></select>
于 2015-12-14T19:25:14.023 回答