Question

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>

我正在尝试创建一个类似模态的容器，每次单击一个不同的按钮时，它将显示不同的模板。为了实现这一点，我创建了三个按钮和相关的控制器控制器，更新了服务所服务的共享变量和一个将读取共享变量的指令，并根据共享变量的值更新了给定元素的内容。

但我无法让指令工作。我做错了什么？

Answer 1

$ watch不是必需的。只需将指令范围属性分配给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; 
        }
    }
})

当您的控制器更新服务属性时，ng-include会注意到。

Angular.js - 指令和服务通信

1 个答案: