Question

我正在尝试编写一个只显示状态列表的自定义指令。但是，我想为包含item_name和item_value的对象的列表构建一个尽可能通用的指令。例如，我可以使用相同的指令来填充城市，邮政编码等。

这是我到目前为止所拥有的：

我的模板看起来像这样（不确定我需要在其中迭代） {{defaultName中}}

我的指示如下：

app.directive('locselect', function () {
function link(scope, element, attrs) {

};
var select = {
    replace:true,
    link: link,
    restrict: 'E',
    templateUrl: 'app/search-filters/prp-select.html',
    scope: {
       defaultname: "defaulValue", 
        items:"="
    }
}    
return select;
});

我在html中执行的指令如下所示：

  <locselect items="states" default-value="State"></locselect>

假设控制器的范围填充范围内的状态或任何其他列表。

Answer 1

您可能还需要将ng-model添加到指令中，以将所选值绑定到控制器范围。

这可能就是你所看到的：

 app.directive('locselect', function () {
    function link(scope, element, attrs) {
        scope.ngModel = scope.defaultItem;
        console.log(scope.items);
    }

    var select = {
        restrict: 'E',
        templateUrl: 'prp-select.html',
        replace: true,
        scope: {
            items: "="
        }
    }

    return select;
});

并且您的指令模板（app / search-filters / prp-select.html）应为

<select ng-options="item as item.full_name for item in items">
    <option value="">Select State...</option>
</select>

这就是你想要使用的方式 -

<locselect ng-model="modSelectedState" items="states"></locselect>

检查plunkr here

Answer 2

这是一个通用指令，它打印一个值列表：

app.directive('list', function () {
  return {
    scope : {
      listItems : "="
    },
    template: '<ul><li ng-repeat="item in listItems">{{item.name}}, {{item.value}}</li></ul>',
    link: function (scope, element, attrs) {

    }
  };
});

http://plnkr.co/edit/HHzDoYrqln0pawuL7MuU?p=preview

修改

基于你的plnkr的例子： http://plnkr.co/edit/SnpO2admMHmJV25lyi4p?p=preview

为Angular Js中的状态编写自定义指令

2 个答案: