他のビューで使用する必要がある配列を含むカスタム ディレクティブを作成しました。たとえば、別のコントローラーでその値を使用する必要があるディレクティブ コンテンツに入力ボックスがあるとします。ng-model を使用しようとしましたが、成功しませんでした。
ここに私のコントローラーがあります:
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>
ここに私のプランカーがあります: http://embed.plnkr.co/rzlUQM6FBI3Sll4F8WaG/preview
ところで、plunker が content.html をロードしない理由がわかりません
更新私は、コントローラーの in ディレクティブを追加し、 in を削除する必要があることを理解しましcontroller: directiveController
たng-controller='directiveController'
content.html