Angular.js - directive and service communication

Question

<!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?

Mark Rajcok · Accepted Answer · 2013-08-12 15:31:22Z

1

$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.

answered Aug 12, 2013 at 15:31

Mark Rajcok

365k114 gold badges501 silver badges494 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Angular.js - directive and service communication

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related