gpt4 book ai didi

Angularjs自定义指令使用指令 Controller 变量

转载 作者:行者123 更新时间:2023-12-02 03:28:38 25 4
gpt4 key购买 nike

我创建了一个自定义指令,其中有一个我需要在其他 View 中使用的数组。例如,假设我的指令内容中有一个输入框,我必须在另一个 Controller 中使用它的值,我该如何实现?我尝试使用 ng-model 但没有成功。

这是我的 Controller :

angular.module("demo", []);

angular.module("demo").controller("demoController", function ($scope) {
$scope.name = "John";
});

angular.module("demo").controller("directiveController", function ($scope) {

$scope.name = "John Doe";

});


angular.module("demo").directive("passVariable", function () {
return {
restrict: 'AEC',
require: "ngModel",
templateUrl: "content.html",
link: function (scope, element, attr, ngModel) {
scope.$watch(function () {
return ngModel.$modelValue;
},
function (modelValue) {
console.log(modelValue);
});

}
}
});

和 HTML 文件:

<!DOCTYPE html>
<html>

<head>
<script data-require="angular.js@1.4.0-beta.5" data-semver="1.4.0-beta.5" src="https://code.angularjs.org/1.4.0-beta.5/angular.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.6/angular.min.js"></script>
</head>

<body ng-app="demo" ng-controller="demoController">
<div>
<pass-variable ng-model="name"></pass-variable>
</div>
<br />
<div>
Second directive textbox: <input type="text" ng-model="name" pass-variable="" />
</div>
<br />
<div>
Main textbox: <input type="text" ng-model="name" />
</div>
</body>

</html>

和content.html

<div ng-controller="directiveController">
Content Textbox: <input type="text" ng-model="name"/>
</div>

这是我的 plunker:http://embed.plnkr.co/rzlUQM6FBI3Sll4F8WaG/preview

顺便说一句,我不知道为什么 plunker 不加载 content.html

更新 我发现我应该在指令 controller: directiveController 中添加 Controller 并删除 ng-controller='directiveController'content.html

最佳答案

如果我没理解错的话,你的问题出在 content.html 中的 ng-controller。

<div ng-controller="directiveController">
Content Textbox: <input type="text" ng-model="name"/>
</div>

删除 ng-controller 后,所有三个输入字段都将同步。

它不起作用的原因是您在指令模板中定义了一个新 Controller ,它有一个 $scope.name 属性隐藏了原始 Controller 的属性。

这是一个 plnkr

关于Angularjs自定义指令使用指令 Controller 变量,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/28852368/

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