6

我在 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"/>

它适用于选择框生成的字段之外的工作。

4

4 回答 4

9

好的，我想通了。它涉及将我的父属性作为“=”传递（由 Tosh 建议）。我还必须调用 $compile 以使其识别 ng-model 指令。这是完整的代码，我确信有办法做到这一点，但我很高兴让它工作。

angular.module('device_list_tag', []).
  directive('deviceList', function($compile) {
    return {
      restrict: 'E',
      scope: {
        devices: '=',
        key: '=',
        displayName: '=',
        bindAttr: '=' // added
      },
      link: function(scope, element, 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)
      }
    }
  })
于 2012-10-04T01:11:50.170 回答
2

也许您可以添加bindField: '='您的范围指令定义。并使用此变量连接到父范围。

于 2012-10-04T00:09:43.573 回答
1

你问的是，

1）保持父范围数组更新，同时我们编辑隔离范围表单元素。如果是的话，我已经在这个小提琴http://jsfiddle.net/W7YrZ/2/中复制了一个类似的场景。

我试图做的总结。

umbilical1）在ng-repeat迭代的当前项中分配一个属性。

2）然后我在父作用域的上下文中评估链接函数内部的这个属性，这给出了对父作用域数组中的一个数组对象的引用（指针）profiles。

3）然后正如@Mark Rajcok所说“原语是按值复制的，而对象是通过引用复制的”。我将通过第 2 步得到的对象绑定到模板字符串中的文本框。

于 2013-03-05T05:23:33.543 回答
-3

出于角度和验证 javascript 中 jQuery 代码清洁的原因，只需替换选择$器angular.element

$('<input>').addClass('span3')

必须写

angular.element('<input>').addClass('span3')
于 2014-01-15T14:22:13.620 回答