如何在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

回答

相关问题