angularjs - communication directive service

jsbin: http://jsbin.com/oworoz/1/edit angularjs - communication directive service

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

Je suis en train de faire un type conteneur modal qui affiche différents modèles chaque fois un autre bouton cliqué. Pour ce faire, j'ai créé trois boutons et contrôleurs de contrôleurs associés, mettant à jour une variable partagée servie par un service et une directive qui lira la variable partagée, et met à jour le contenu de l'élément donné en fonction de la valeur de la variable partagée. .

Mais je n'ai pas réussi à obtenir un fonctionnement directif. Qu'est-ce que je fais mal?

Source

2013-08-12 hinoglu

$ watch n'est pas nécessaire. Juste attribuer une propriété de champ directive à 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; 
     } 
    } 
})

Lorsque vos contrôleurs sont mis à jour la propriété de service, ng comprennent remarquera.

Source

2013-08-12 15:31:22

angularjs - communication directive service

Répondre

Questions connexes