Why can't the angular directive see the variable?

R

Roman Rodionov2016-09-01 05:17:32

JavaScript

Roman Rodionov, 2016-09-01 05:17:32

var app = angular.module('app', [
    'templates'
]);
(function (){
    app
    .controller("templateCtrl", ["$scope", function($scope){
        $scope.templatePath = "registration/form";
        this.changeTemplate = function(path) {
            $scope.templatePath = path;
        };
    }])
    .directive("viewer", function(){
        return {
            template: "Path: " + templatePath,
        }
    });
})();

<body>
    <div class="container-fluid" ng-controller="templateCtrl">
        <viewer></viewer>
    </div>
    <script src="libs/libs.min.js"></script>
    <script src="js/main.min.js"></script>
</body>

The viewer directive does not see the templatePath variable.
Here is an example from the Angular site, where everything works.

Reply

Answer the question

In order to leave comments, you need to log in

2 answer(s)

V

Vlad Tokarev, 2016-09-01
@Romashishka

By itself, the directive should not see $scope.templatePath in this way. As I understood from what you need:

// ...
template: "Path: {{ templatePath }}"
// ...

PS. Your link to the example is incorrect, in order to share it, you need to re-save it.

R

Roman Rodionov, 2016-09-02
@Romashishka

And how to throw the template variable into the directive's template property? It gives me html text.

app
        .controller("templateCtrl", function ($scope, $templateCache){
            $scope.templatePath = "registration/form";
            $scope.template = $templateCache.get($scope.templatePath);
        })
        .directive("templateview", function (){
            return {
                scope: {
                    template: "="
                },
                restrict: "E",
                template: "{{template}}",
                link: function (scope){
                    console.log(scope);
                }
            }
        });

<templateview data-template="template"></templateview>