Question

我是AngularJS的新手，我有以下问题。

我有一个HTML元素：

    <div class="hn-multi-select" array-of-strings="testArray">
    </div>

和指令：

angular.module('directivesinuse')
  .directive('arrayOfStrings', function($rootScope) {
    return {
      scope: {
            pahn: '=arrayOfStrings'
        },

      template: '<div><input type="text">'+
          '<select name="" id="" multiple ng-model="pahn" ng-options="dm.name for dm in pahn"></select></div>'
      replace: true,
      compile: function compile(tElement, tAttrs, transclude) {
          return {
            pre: function preLink(scope, iElem, iAttrs) {
            },
            post: function postLink(scope, iElem, iAttrs) {
          }
        };
      }

    };

});

我想要实现的是，您将一个数组（具有属性名称的对象）输入到HTML组件array-of-strings="dModelTest"中。该数组被传递给指令，该指令创建一个包含该数组中所有组件的选择列表。

一切正常，但我无法从array-of-strings获取数组并从该信息中创建正确的模板。

在网页中，它仍显示为：

<select name="" id="" multiple="" ng-model="pahn" ng-options="dm.name for dm in pahn" class="ng-pristine ng-valid"></select>

但它应该显示为

<select name="" id="" multiple="" ng-model="dModelTest" ng-options="dm.name for dm in dModelTest" class="ng-pristine ng-valid"></select>

你们对这个问题有什么建议吗？

Answer 1

在您的代码中，您忘记使用

声明每个项目的显示值

ng-options="dm as dm.name for dm in pahn"

此外，在您的情况下，您不需要覆盖编译功能，定义模板就足够了。

这是一个工作示例。希望它会对你有所帮助。

http://jsfiddle.net/n7TKE/4/

    .controller('ParentController', function($scope) {
        $scope.array = [{name: 'hi'}, {name: 'ho'}, {name: 'hu'}];
    })
    .directive('toSelectList', function () {
        return {
            scope: {
                pahn: '=toSelectList'
            },
            restrict: 'A',
            replace: true,         
            template: '<div><input type="text" ng-model="selectedValue.name">'+
'<select ng-model="selectedValue" ng-options="dm as dm.name for dm in pahn"></select></div>'

        }

该指令获取项目数组并使用它们创建一个选择列表。

项目名称绑定到输入文本

AngularJS指令：在模板中插入属性值

1 个答案: