CODEWITHSUNDEEP
angularjsangular-directive
byrdr
byrdr

Reputation: 5487

Angular.js directive attribute scope value update

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.

Upvotes: 1

Views: 199

Answers (1)

byrdr
byrdr

Reputation: 5487

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

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

Upvotes: 0

Related Questions