javascript - AngularJS指令: Inserting Attribute values in template

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" 中。该数组被传递给指令，指令创建一个包含该数组中所有组件的选择列表。

一切正常，但我无法让它从字符串数组中获取数组并根据该信息创建正确的模板。

在网页中它仍然显示为:

<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>'

        }

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

项目名称绑定(bind)到输入文本