Menu
I created a custom directive in which I have an array that I need to use in other views. for example, say I have an input box in my directive content that I have to use it's value in another controller, how can I achieve that? I tried to use ng-model but I was not successful.
here is my controllers:
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);
});
}
}
});
and the HTML file:
<!DOCTYPE html>
<html>
<head>
<script data-require="[email protected]" 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>
and content.html
<div ng-controller="directiveController">
Content Textbox: <input type="text" ng-model="name"/>
</div>
and here is my plunker: http://embed.plnkr.co/rzlUQM6FBI3Sll4F8WaG/preview
BTW, I don't know why plunker does not load content.html
UPDATE I've figured out I should add the controller in directive controller: directiveController and remove the ng-controller='directiveController' in content.html
474
If I understood correctly, your problem is with the ng-controller in content.html.
<div ng-controller="directiveController">
Content Textbox: <input type="text" ng-model="name"/>
</div>
once you remove the ng-controller, all three input fields will be synced.
the reason it didn't work is that you defined a new controller in the directive template, which had a $scope.name property that shadowed the original controller's property.
here's a plnkr
165
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
