AngularJS: Communication between directives and view updation

Question

I am new in AngularJS. I search throw a lot of information and find some nice solution that should work for me ( AngularJS communication between directives ). Code in first directive looks like that:

angular.module('app')
  .directive('myItem', function () {
    return {
      templateUrl: 'views/item.html',
      restrict: 'C',
      controller: function ($scope, $element) {
        $element.closest('.models-slider').on('afterChange', function(event, slick, currentSlide){
          $scope.$emit('model:updated', currentSlide);
        });
      }
 })

And in second:

angular.module('app')
  .directive('model', function () {
    return {
      templateUrl: 'views/model.html',
      restrict: 'E',
      controller: function ($scope, $element) {
       $scope.$on('model:updated', function(e, data){
         $scope.item = data;
         console.log('scope',  $scope); // Here I see right value of item
       });
     });
    }
 });

But the problem is inside view/model.html:

<div class="left-block">
  <a class="back" href="#"></a>
  <div class="model-wrapper">
    <div class="front-view active">
      <img src="images/model.png"/>
      <img ng-if="item.frontImage" ng-src="{{ item.frontImage }}"/>
    </div>
    <a class="rotate"></a>
  </div>
</div>

It doesn't update. Is there are any mistakes in my code? How can I update my view?

Issues with scope have a lot to do with where they are in the DOM. It would be helpful to see more than just an image tag. I don't even see any custom directives here... — nbering, Sep 01 '15 at 15:45
@Balgor30 Thanks for your attention, I have updated the question. — Daria, Sep 01 '15 at 16:01
try this. `$scope.$apply(function(){ $scope.$emit('model:updated', currentSlide); });` or there `$scope.$apply(function(){ $scope.item = data; console.log('scope', $scope); }); // Here I see right value of item` — Sherali Turdiyev, Sep 01 '15 at 16:08
@SheraliTurdiyev It's a pity but it's not working for me, I have tried both cases ( — Daria, Sep 01 '15 at 16:24
@SheraliTurdiyev my controller view that consist both directives : `

....` — Daria, Sep 01 '15 at 16:31

xxxxx · Accepted Answer · 2015-09-01T16:14:09.727

0

emit 'model:updated' inside scope.$apply in myItem directive since afterChange is a non-angular event

edited Sep 01 '15 at 16:14

answered Sep 01 '15 at 16:04

xxxxx

1,918
2
17
22

score 0 · Answer 2 · answered Sep 01 '15 at 16:24

Your question is not quite clear though, I will try to give some answer or hints for you consider:

First, the $scope.$on is not intended for you to pass data between different scopes. And why do you want to use the restriction of C for your myItem directive? how are you using the two directives my-item and model? where are they in your views?

You can build a bi-directional binding between directive and controller (or controller for another directive). You need to make an isolated scope in the directive myItem:

angular.module('app')
  .directive('myItem', function () {
    return {
      templateUrl: 'views/item.html',
      restrict: 'AEC',
      scope: {
          item: '='   //bi-directional binding
       },
      controller: function ($scope, $element) {
        $element.closest('.models-slider').on('afterChange', function(event, slick, currentSlide){
         // $scope.$emit('model:updated', currentSlide);
         $scope.item = currentSlide;
        });
      }
 })

In the directive template for your model, you can get the item

<my-item item="item"></my-item>

AngularJS: Communication between directives and view updation

2 Answers2