gpt4 book ai didi

javascript - AngularJS - 将两个指令绑定(bind)/链接在一起

转载 作者:行者123 更新时间:2023-11-30 00:27:11 25 4
gpt4 key购买 nike

将两个指令链接/绑定(bind)在一起的首选方法是什么?我有一个带有两个指令的 Controller ,第一个指令是一个选择元素,在选择选项之后,第二个指令应该处理所选项目的值。

应用代码:

var app = angular.module('plunker', []);

app.controller('MainCtrl', function() {
var sharedData = { selectedId: '' };

var vm = this;

vm.sharedData = sharedData;
});

app.directive('directiveA', ['$compile', function($compile) {
return {
restrict: 'E',
scope: {
selectedId: '='
},
template: '<select data-ng-model="vm.sharedData.selectedId" data-ng-options="currentSelect.Id as currentSelect.Name for currentSelect in vm.sharedData.availableSelects track by currentSelect.Id"><option value="">Select option</option></select><p>Directive A, selected ID: {{vm.sharedData.selectedId}}</p>',
bindToController: true,
controllerAs: 'vm',
controller: function() {
vm = this;

vm.sharedData = {
availableSelects: [
{Id:1, Name: 'Option 1'},
{Id:2, Name: 'Option 2'},
{Id:3, Name: 'Option 3'},
{Id:4, Name: 'Option 4'}
]
}
vm.logMessage = logMessage;

function logMessage(selectedId) {
console.log('directiveA: ' + selectedId);
}
},
link: function($scope, elem, attr, ctrl) {
attr.$observe('selectedId', function(selectedId) {
ctrl.logMessage(selectedId);
});
}
};
}]);

app.directive('directiveB', ['$compile', function($compile) {
return {
restrict: 'E',
scope: {
selectedId: '='
},
template: '<p>Directive B, selected ID: {{vm.sharedData.selectedId}}</p>',
bindToController: true,
controllerAs: 'vm',
controller: function() {
vm = this;

vm.logMessage = logMessage;

function logMessage(selectedId) {
console.log('directiveB: ' + selectedId);
}
},
link: function($scope, elem, attr, ctrl) {
attr.$observe('selectedId', function(selectedId) {
ctrl.logMessage(selectedId);
});
}
};
}]);

HTML代码:

<!DOCTYPE html>
<html data-ng-app="plunker" data-ng-strict-di>
<head>
<meta charset="utf-8" />
<title>AngularJS Plunker</title>
<script>document.write('<base href="' + document.location + '" />');</script>
<link href="style.css" rel="stylesheet" />
<script data-semver="1.4.1" src="https://code.angularjs.org/1.4.1/angular.js" data-require="angular.js@1.4.x"></script>
<script src="app.js"></script>
</head>

<body ng-controller="MainCtrl as vm">
<p>MainCtrl, selected ID: {{vm.sharedData.selectedId}}</p>
<directive-a data-selected-id="vm.sharedData.selectedId"></directive-a>
<directive-b data-selected-id="vm.sharedData.selectedId"></directive-b>
</body>

</html>

这是一个 Plunker 示例:

http://plnkr.co/edit/KVMGb8uAjUwD9eOsv72z?p=preview

我做错了什么?

最好的问候,

最佳答案

关键问题围绕着您对隔离作用域的使用:

scope: {
selectedId: '='
},

使用 controllerAs 绑定(bind):

controllerAs: 'vm',

基本上,这基本上是将 View 模型置于指令范围内,通过您在 controllerAs 中分配的别名进行访问。所以基本上在你的 html 中:

<directive-a data-selected-id="vm.sharedData.selectedId"></directive-a>

您实际上是在访问指令 - 一个 View 模型,而不是 MainCtrl View 模型。因为您将指令-a 设置为具有隔离范围...这是一个新范围,与 MainCtrl 隔离。

您需要做的更多是按照以下几行:

http://plnkr.co/edit/wU709MPdqn5m2fF8gX23?p=preview


编辑

TLDR:我建议在使用独立范围时使用唯一的 View 模型别名 (controllerAs),以正确反射(reflect)它们不是同一 View 模型这一事实。

关于javascript - AngularJS - 将两个指令绑定(bind)/链接在一起,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30988998/

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