Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!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>
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
anonymouspro
0viewers