javascript - crear - directivas personalizadas angularjs

La directiva de angular.js templateUrl no puede vincular el alcance

Question

Estoy creando una directiva que mostrará y mostrará contenido al escuchar el evento $ routeChangeError en $ rootScope.

Lo tengo todo para trabajar al subrayar la plantilla de esta manera:

app.directive("alert", function ($rootScope) {
    ''use strict'';
    return {
        restrict: "E",
        replace: true,
        template: ''<div class="alert alert-warning alert-dismissable" ng-show="isError">''
            + ''<button type="button" class="close" data-dismiss="alert" aria-hidden="true">&times;</button>''
            + ''{{ message }}''
            + ''</div>'',
        //templateUrl: ''views/alert.html'',
        link: function (scope) {
            $rootScope.$on("$routeChangeError", function (event, current, previous, rejection) {
                scope.isError = true;
                scope.message = rejection;
            });
        }
    };
});

Pero reemplazar la plantilla con templateUrl (como he comentado en el ejemplo), no funciona. La plantilla se carga, pero el enlace no parece estar funcionando.

No hay errores en la consola.

He jugado con varias configuraciones de directivas, pero no he tenido éxito en hacerlo funcionar. Pensé que tal vez tenía que requerir ngShow, pero cuando lo intento obtengo un error de compilación $:

Error: [$compile:ctreq] http://errors.angularjs.org/undefined/$compile/ctreq?    p0=ngShow&p1=ngShow
    at Error (<anonymous>)
    at https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0/angular.min.js:6:453
    at r (https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0/angular.min.js:46:477)
    at S (https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0/angular.min.js:49:341)
    at https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0/angular.min.js:55:213
    at https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0/angular.min.js:66:72
    at C (https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0/angular.min.js:91:121)
    at C (https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0/angular.min.js:91:121)
    at https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0/angular.min.js:92:288
    at g.$eval (https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0/angular.min.js:100:198) <div class="alert alert-warning alert-dismissable ng-binding" ng-show="{{isError}}">

Pensé que tal vez tenía que usar la configuración del alcance, pero no entiendo cómo. Encontré que la documentación es un poco confusa.

¿Estoy en el camino correcto?

Answer 1

Supongo que estás hablando de una directiva con alcance aislado. Si es así, no tiene acceso a las variables de ámbito derivadas de los ámbitos principales.

En general, templateUrl no puede interpretar la inyección $ rootScope en .directive

Directives.directive (''...'', función ($ rootScope)

Por lo tanto, no puede usar la sintaxis $ rootScope en su vista. Esto solo se puede hacer si usa la plantilla: ''...'' en su lugar. Vea aquí para dominar esta técnica:

AngularJS evalúa la variable $ rootScope en la plantilla directiva

Además de usar la plantilla: dentro de su directiva, puede inyectar $ rootScope en su controlador y registrar una variable $ scope local con el valor que desea usar en su vista. Se vería así dentro de su controlador:

$ scope.headertype = $ rootScope.currentHeaderType;

A partir de ahí, puede usar headertype dentro de la vista templateUrl. La desventaja de esta técnica es que pierde el enlace de datos inverso. Si necesita enlace de datos inverso, debe derivar la variable de un atributo ''=''

plnkr = http://mle.mymiddleearth.com/files/2013/07/aint-nobody-got-time-for-that.png