Question

我正在使用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'

}）

Answer 1

根据我的理解，在Angular 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); }
    );
}

此外，对于组件，在大多数情况下，您应该使用单向绑定'<'而不是双向绑定'='，并使用函数/事件（绑定'&'）进行其他绑定方向。

如何在angularjs组件中使用$ watch

1 个答案: