2013-01-14 15 views
9

Używam AngularJS w moim projekcie i chciałem spróbować stworzyć dyrektywy. Podążyłem już za kilkoma samouczkami i nie widzę, co robię źle. Co najgorsze, nie pokazuje żadnych komunikatów o błędach ani ostrzeżeń, ale także nie wykonuje funkcji dyrektywy. Teraz, mój kod jest dość dużo, to:Dyrektywy AngularJS nie działają

angular.module('components', []).directive('ngxOnshow', function() { 
    return { 
      restrict: 'A', 
      link: function(scope, element, attrs){ 
         console.log("hello world") 
         //Resto do código da função 
      } 
    }; 
}); 
var module = angular.module('app', ['components']); 

W treści strony HTML mam to:

<body ng-autobind ng-app="app"> 

Ale wtedy, kiedy użyć dyrektywy, to nie działa.

<div ng-show="showApp == true" ngx-onshow="showAppBar()"> 
</div> 

Reszta aplikacji działa dobrze, wiązania, domyślne dyrektywy, wszystko oprócz tego. Być może czegoś brakuje?

Dzięki, Scorch :)

+1

Drukuje "Witaj świecie" na konsoli dla mnie ... –

+1

Twój błąd musi być gdzie indziej. Skopiowałem i wkleiłem twój kod do jsFiddle (http://jsfiddle.net/ZDPTJ/1/) i widzę "cześć świat" w konsoli. – Lukas

+0

Czy pamiętasz, aby dodać plik z kodem dyrektywy do pliku index.html? Przepraszam, ale musiałem zapytać - zapomniałem o tym kilka razy sam;) Tak naprawdę zakładam, że w tej chwili posiadasz cały kod w pliku single.js, więc jest to prawdopodobnie coś innego. Tylko pytanie kontrolne :) –

Odpowiedz

11

Wykorzystanie „&”, aby umożliwić wykonanie dyrektywy wyrazem/funkcję zdefiniowaną w ramach dominującej. $ Obserwować interpolowana izolować atrybut zakres (czyli jeden z definicją z „@”, który zawiera {{}}), aby określić, kiedy to zmienia:

myApp.directive('ngxOnshow', function() { 
    return { 
    restrict: 'A', 
    scope: { 
     showApp: '@', 
     ngxOnshow: '&' 
    }, 
    link: function (scope, element, attrs) { 
     console.log("inside link function") 
     attrs.$observe('showApp', function (newValue) { 
     newValue === "true" && scope.ngxOnshow() 
     }) 
    } 
    }; 
}); 

newValue jest porównywana z "true" nie true ponieważ interpolowane wartości zawsze są struny.

HTML:

<div ng-show="showApp == true" show-app="{{showApp}}" ngx-Onshow="showAppBar()"> 

Fiddle.

0

ja naprawdę nie wiem, co dyrektywa powinna zrobić, ponieważ wszystko, co masz jest console.log. Ale ponieważ przekazujesz funkcję do argumentu ngxOnshow, przypuszczam, że chcesz go wykonać. Trzeba powiedzieć dyrektywę wykonać funkcję od rodzica z scope zestaw do &:

angular.module('components', []).directive('ngxOnshow', function() { 
    return { 
      restrict: 'A', 
      scope: { 
      ngxOnshow: '&' 
      }, 
      link: function(scope, element, attrs){ 
         console.log("hello world") 
         //Resto do código da função 
      } 
    }; 
}); 
+0

Cześć i dzięki, nie wiedziałem o tym. Ale niestety problem nie polega na tym, że nadal nie działa i nadal nie wyświetla komunikatu dziennika. :( –

6

Większość błędów dyrektywie są wyświetlane w konsoli, wystarczy włączyć rejestrowanie:

app.config(function($logProvider){ 
    $logProvider.debugEnabled(true); 
}); 

ten sposób, że nie ma potrzeby, aby odgadnąć, dlaczego dyrektywa is't pracy.

Powiązane problemy