Wie man $ watch in angularjs Komponente verwendet

Question

Ich benutze jCarousel für Bild-Miniatur-Schieberegler. aber zuvor habe ich Direktive dafür benutzt, aber jetzt habe ich meinen code in component geändert. aber jetzt bin ich nicht in der Lage, diese Linkfunktion zu verwenden und das Nachladen in der Komponente zu beobachten. weil ich die erste Zeitkomponente in agularjs verwende.

// zurück Code

directive('jblogcarousel', function() { 
return { 
    restrict: 'A', 
    replace: true, 
    transclude: true, 
    scope: { 
     jitems: "=" 
    }, 
    templateUrl: '/templates/blog-carousel.html', 

    link: function link(scope, element, attrs) { 
    var container = $(element); 
    var carousel = container.find('.jcarousel'); 

    carousel.jcarousel({ 
     wrap: 'circular' 
    }); 

    scope.$watch(attrs.jitems, function (value) { 
     carousel.jcarousel('reload'); 
    }); 

    container.find('.jcarousel-control-prev') 
     .jcarouselControl({ 
     target: '-=1' 
    }); 

    container.find('.jcarousel-control-next') 
     .jcarouselControl({ 
     target: '+=1' 
    }); 
    } 
}; 

});

// Aktuelle Code

.component('jCarousel', { 
bindings: { 
    jitems: '=' 
}, 
templateUrl: '/templates/carousel.html' 

})

Answer 1

Von dem, was ich verstanden, in Angular 1.5 Komponenten bindings den Wert an den Controller binden.

So können Sie einen Controller (mit $watch innen) hinzufügen:

// bindings: { ... }, 
// templateUrl: '...', 
controller: function ($scope) { 
    var vm = this; 
    console.log(vm.jitems); // vm.jitems should exist and be bound the value you passed to the component from the outside 

    // you should be able to watch this value like this 
    $scope.$watch(
     function() { return vm.jitems; }, 
     function (newValue) { console.log(newValue); } 
    ); 
} 

Auch mit Komponenten, sollten Sie in den meisten Fällen verwenden Sie eine Art und Weise verbindlich '<' statt Zwei-Wege-'=' Bindung und Nutzungsfunktionen/Ereignisse (Bindung '&') für die andere Richtung.