gpt4 book ai didi

angularjs - 在指令中使用 ng-model

转载 作者:行者123 更新时间:2023-12-04 14:15:49 26 4
gpt4 key购买 nike

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

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)
}
}
})

Controller

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

看起来好像 ng-model 在指令的范围内是本地的,我如何使它适用于父级?如果我在页面上有一堆文本字段,例如

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

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

最佳答案

好的,我想通了。它涉及将我的父属性作为“=”传递(由 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)
}
}
})

关于angularjs - 在指令中使用 ng-model,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/12717897/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com