angularjs – 在指令中使用ng-model

我在 angularjs中有一个自定义指令.基本上我想要发生的是用户将从选择框中选择一个值,并将值附加到数组.这会导致我的自定义指令被调用并在屏幕上呈现一个新元素.我希望指令生成的文本字段绑定到控制器的属性.

HTML

<device-list ng-repeat="device in devices" key="device.key" display-name="device.display_name" bind-prefix="descriptions"></device-list>

指示

angular.module('device_list_tag',[]).
  directive('deviceList',function() {
    return {
      restrict: 'E',require: '?ngModel',scope: {
        devices: '=',key: '=',displayName: '=',bindPrefix: '@'
      },link: function(scope,element,attrs) {

        var deviceListElement = $(element)
        var containerDiv = $('<div>')
          .addClass('row')


        var labelTag = $('<label>').text(scope.displayName)
          .addClass('span1')

        var bindField = attrs.bindPrefix+'.'+scope.key

        var textField = $('<input>')
          .addClass('span3')
          .attr('ng-model',bindField)

        containerDiv.append(labelTag)
        containerDiv.append(textField)

        deviceListElement.append(containerDiv)
      }
    }
  })

调节器

function DevicesCtrl($scope) {
  descriptions = {}
}

似乎ng-model是指令范围的本地,我如何将其应用于父级？如果我在页面上有一堆文本字段,就像

<input ng-model="descriptions.test"/>

它的工作原理除了选择框生成的字段外.

angular.module('device_list_tag',function($compile) {
    return {
      restrict: 'E',bindAttr: '=' // added
      },attrs) {

        console.log(scope)

        var deviceListElement = $(element)
        var containerDiv = $('<div>')
          .addClass('row')


        var labelTag = $('<label>').text(scope.displayName)
          .addClass('span1')

        var bindField = 'bindAttr.'+scope.key

        var textField = $('<input>')
          .addClass('span3')
          .attr('ng-model',bindField)

        $compile(textField)(scope) // added

        containerDiv.append(labelTag)
        containerDiv.append(textField)

        deviceListElement.append(containerDiv)
      }
    }
  })