Angular.js directive attribute scope value update

Question

I have a $scope attribute being passed into a directive, which is binding correctly to the parent controller. The $scope value in the controller is being updated through a function in the controller, but the new value is not being reflected in the directive.

Directive html:

<edit-item new-item="newItem" is-spanish="isSpanish" api="api" save-item="saveItem"></edit-item>

Directive:

app.directive('editItem', function($rootScope){
return{
  templateUrl: "../templates/edititem.html",
  restrict: "E",
  scope: {
    api: '=',
    newItem: '=',
    saveItem: '=',
    isSpanish: '='
  },
  controller: function($location, $scope){
    var isPartner  = $location.$$path.contains("partner");
    var isOverview = $location.$$path.contains("overview");
    var isService  = $location.$$path.contains("service");
    var isBlog     = $location.$$path.contains("blog");
    if(isPartner){
      $scope.isPartner = true || false;
    }
    if(isOverview){
      $scope.isOverview = true || false;
      console.log($scope.isOverview);
    }
    if(isService){
      $scope.isService = true || false;
    }
    if(isBlog){
      $scope.isBlog = true || false;
    }
  }
 }            
});

Template:

<div class="editable">
 <div class="editingTitle"> 
    <a editable-text="newItem.title" ng-model="newItem.title">
        <h4>{{ newItem.title || '&nbsp;' }}</h4>
    </a>
    <input ng-if="!isOverview" ng-model="newItem.shortname">
  </div>


  <div></div>
  <div ng-switch on="isSpanish">
    {{newItem}}
  <div ng-switch-when="false" class="editingText" text-angular ng-model="newItem.contents"></div>
  <div ng-switch-when="true" class="editingText" text-angular ng-model="newItem.contentsSp"></div>
  <a class="editApply" ng-click="saveItem(newItem, api)">Apply Revisions</a>
  </div>
</div>

parent controller:

$rootScope.newItem = {};

The newItem starts as being empty. When editing an item the current item selected is passed into the newItem.

That is through a sibling directive:

<div class="editList">
<div class="editWrapper" ng-repeat="item in list">
 <div class="editTitle"><a href="">{{item.title}}</a></div>  
 <a ng-click="editItem(item)"><div class="editEdit">Edit</div></a>
 <a ng-click="deleteItem(item, api)" ><div class="editDelete"> Remove</div></a>
  {{newItem}}
  </div>

The editItem(Item); function just sets the item clicked on as the newItem:

$scope.editItem = function(item){
$scope.newItem = item;    
}

I'm switching the contents of newItem when a promise is resolved...there is a bit of logic that occurs, looping through items in another service, matching an item which matches it's property and returning that item. This all works correctly. Here is the resolving method on the controller, which sets the retrieved item to the newItem:

function getSpanishOverviewByIDSuccess(data) {
$rootScope.newItem = data;
console.log(data); 
}

The newItem is the value which is being updated in the parent controller. I can see the value being updated when logged to the console, but not in the directive.

Is there something that I'm missing? I believe the '=' should perform two-way binding.

Can we have a look at edititem.html, as well as your controller that's changing newItem? Usually, that happens when the modification of the value is done outside of a digest. $scope.$apply() usually solves the issue. — jlowcs
– jlowcs, Commented Mar 17, 2015 at 19:45
Are you calling this function via javascript, or angular? If javascript, you need to include $rootScope.$apply(). — Scottie
– Scottie, Commented Mar 17, 2015 at 19:52
I'm a bit confused... you have ng-click="saveItem(newItem, api)", and you also have saveItem: '=' in your directive scope and save-item="saveItem" in your directive HTML. Are you expecting that ng-click will call the saveItem in your directive? Or is there a different saveItem declared in your controller? — Scottie
– Scottie, Commented Mar 17, 2015 at 19:56
I've added some more info showing the process of adding the newItem and updating it. — byrdr
– byrdr, Commented Mar 17, 2015 at 20:03

byrdr · Accepted Answer · 2015-03-17 20:09:15Z

0

I overlooked the $rootScope on a variable: This resolved the issue.

$scope.editItem = function(item){
    $rootScope.newItem = item;   
}

answered Mar 17, 2015 at 20:09

byrdr

5,52712 gold badges50 silver badges80 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Angular.js directive attribute scope value update

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related