Jak korzystać z usługi $ timeout w dyrektywie?

Question

Zasadniczo chcę zmierzyć szerokość elementu po tym, jak kątowe zmanipulował DOM. Chciałbym użyć do tego $ timeout, ale wciąż powoduje to błędy.

HTML

<div ng-app="github"> 
     <ul mynav> 
     <li ng-repeat="nav in navItems">{{nav.name}}</li> 
     </ul> 

     </div> 
    </div> 

CSS

ul,li { 
    display:inline-block; 
} 
li { 
    margin-right:1em; 
} 

JS

(function() { 
    angular.module('github', []) 
    .directive('mynav', function($window) { 
     return { 
     restrict: 'A', 
     link: function(scope, element, attrs, timeout) { 
      scope.navItems = [{ 
      "name": "home" 
      }, { 
      "name": "link1" 
      }, { 
      "name": "link2" 
      }, { 
      "name": "link3" 
      }]; 
      timeout(function() { 
      console.log($(element).width()); 
      }) 
     } 

     } 
    }); 
})(); 

Answer 1

link funkcja nie jest właściwe miejsce do wstrzykiwania zależności. Ma zdefiniowaną sekwencję parametrów, jak pokazano poniżej. Nie można tam uzależnić.

link(scope, element, attrs, controller, transcludeFn) { 

Inject $timeout zależność w dyrektywie function.

(function() { 
    angular.module('github', []) 
    .directive('mynav', function($window, $timeout) { //<-- dependency injected here 
     return { 

Następnie wystarczy użyć wstrzykuje $timeout wewnątrz link funkcja

$timeout(function() { 
    console.log(element.width()); 
}) 

Answer 2

Wystarczy zastąpić limitu czasu z setInterval jak poniżej:

(function() { 
    angular.module('github', []) 
    .directive('mynav', function($window) { 
     return { 
     restrict: 'A', 
     link: function(scope, element, attrs, timeout) { 
      scope.navItems = [{ 
      "name": "home" 
      }, { 
      "name": "link1" 
      }, { 
      "name": "link2" 
      }, { 
      "name": "link3" 
      }]; 
      setInterval(function() { // replpace 'timeout' with 'setInterval' 
      console.log($(element).width()); 
      }) 
     } 

     } 
    }); 
})(); 

Nadzieję, że pracuje dla Ciebie.

Answer 3

setInterval(function(){ 
    // code here 
    $scope.$apply(); 
}, 1000); 

$ apply jest dołączone jako przypomnienie, że ponieważ jest to zewnętrzne wywołanie jQuery, musisz powiedzieć kątowo, aby zaktualizować DOM.

$ Timeout bycia wersja kątowa automatycznie aktualizuje DOM