如何在angularjs組件中使用$ watch

我正在使用jCarousel作爲圖像縮略圖滑塊。但以前我使用相同的指令，但現在我將代碼更改爲組件。但現在我無法使用該鏈接功能並觀看組件中的重新加載。因爲我在agularjs中使用第一次組件。

//上一頁代碼

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' 
    }); 
    } 
};

}）;

//當前代碼

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

}）

來源

2016-09-29 Dinesh Kumar

從我理解的，在角1.5組分bindings將結合的值到控制器。

所以，你可以添加一個控制器（帶$watch內）：

// 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); } 
    ); 
}

此外，通過組件，您應該在大多數情況下使用的一種方法結合'<'而不是雙向綁定'='和使用功能/事件（綁定'&'）爲另一個方向。

來源

2016-09-29 15:01:25 mrzli

如何在angularjs組件中使用$ watch

回答

相關問題