Обновлено свойство не распознается $ смотреть

Question

У меня есть директива (Давайте назовем его B) используется внутри другого шаблона директивы (Давайте назовем его А) следующим образом:

<cr-carousel items="carouselData"></cr-carousel>

Свойство carouselData является массивом объекты.

Внутри моего контроллера для директивы AI есть крюк в событие, в котором я изменить carouselData через Array.prototype.splice.apply:

$scope.$on('carousel.keypress', function (event, data) { ... some logic and branching Array.prototype.splice.apply($scope.carouselData, [someIndex, 0].concat(newItems));

Как вы можете видеть, я вставляя новые элементы карусельного в карусели в некоторых индекс.

Сама карусель содержит директиву ретранслятора:

<li ng-repeat="item in carouselData">

, который, кажется, работает нормально. Вставка новых элементов в карусель приводит к появлению новых элементов в списке в конце HTML-кода.

Проблема, с которой я столкнулся, заключается в том, что $watch внутри директивы B, которая смотрит carouselData, не срабатывает при вставке новых элементов.

$scope.$watch($attrs.items, function(value) { console.log("The elements for the carousel just changed.", value); });

Я вижу сообщение показать пару раз при загрузке страницы, но я ничего не получаю, когда новые элементы вставляются. Я попробовал обернуть код splice в $timeout, а также попробовал позвонить $scope.$apply(), чтобы узнать, что это вызовет что угодно, и nadda.

Может ли кто-нибудь объяснить, что здесь происходит?

Вот JSFiddle выпуска: http://jsfiddle.net/urdjrqvL/

Обратите внимание, что Here happened только вход в консоль в первый раз, когда значения обновляются. Когда значение свойства обновляется в $timeout, элементы отображаются в HTML, но $watch не срабатывает.

Answer 1

вместо $scope.$watch, используйте $scope.$watchCollection в случае просмотра изменений массива. Если вы используете $watch, есть третий параметр, который указывает, следует ли следить за изменениями в значении или ссылке. Array.splice изменяет содержимое массива, а не ссылку, поэтому простые часы не срабатывают.

Для получения дополнительной информации на $ часов и $ watchCollection, передать correpsonding секции в этом PAGE-
https://docs.angularjs.org/api/ng/type/$rootScope.Scope