angularjsコンポーネントで$ watchを使用する方法

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

私は理解したものと、角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); } 
    ); 
} 

、コンポーネントと、あなたはほとんどの状況で代わりに双方向結合'='の'<'を結合一つの方法を使用して、関数を使用する必要があります/イベント（バインド'&'）をもう一方の方向に使用します。