jsbin: http://jsbin.com/oworoz/1/edit
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body ng-app="deeme">
<modal ></modal>
<script type="text/ng-template" id="templ1" >Bu birinci template</script>
<script type="text/ng-template" id="templ2" >Bu ikinci template</script>
<script type="text/ng-template" id="templ3" >Bu üçüncü template</script>
<button ng-controller="b1" ng-click="update()">templ1</button>
<button ng-controller="b2" ng-click="update()">templ2</button>
<button ng-controller="b3" ng-click="update()">templ3</button>
<script type="text/javascript">
angular.module ("deeme", [])
.factory("serv", function(){
return {
data: {
template: "templ1"
}
}
})
.controller("b1", ["$scope", "serv", function($scope, serv){
$scope.update = function(){
serv.data.template = "templ1";
}
}])
.controller("b2", ["$scope", "serv", function($scope, serv){
$scope.update = function(){
serv.data.template = "templ2";
}
}])
.controller("b3", ["$scope", "serv", function($scope, serv){
$scope.update = function(){
serv.data.template = "templ3";
}
}])
.directive("modal", ["serv", function(serv){
return {
restrict: "E",
template: "<div ng-include='currTempl'></div>",
replace: true,
link: ["$scope", function($scope){
$scope.currTempl = serv.data.template;
alert($scope.currTempl);
$scope.$watch(serv.data.template, function(newVal, oldVal){
$scope.currTempl = newVal;
});
}]
}
}])
</script>
</body>
</html>
I'm trying to make a modal-like container which will display different templates each time a different button clicked. To achieve this, I've created three buttons and related controllers controllers, updating a shared variable served by a service and a directive that will read the shared variable, and update the contents of given element according to the shared variable's value, when it changes.
But I could not manage to get directive working. What am I doing wrong?
$watch is not required. Just assign a directive scope property to serv.data:
.directive("modal", function(serv){
return {
restrict: "E",
template: "<div ng-include='data.template'></div>",
replace: true,
link: function($scope){
$scope.data = serv.data;
}
}
})
When your controllers update the service property, ng-include will notice.