Angular.js指令属性范围值更新

时间:2015-03-17 19:40:55

标签: angularjs angular-directive

我将$ scope属性传递给指令,该指令正确绑定到父控制器。控制器中的$ scope值正在通过控制器中的函数进行更新,但新值未反映在指令中。

指令html:

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

指令:

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;
    }
  }
 }            
});

模板:

<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>

父控制器:

$rootScope.newItem = {};

newItem从空开始。编辑项目时,所选的当前项目将传递到newItem。

这是通过兄弟指令:

<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>

editItem(Item);函数只是将项目设置为newItem:

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

我在解析promise时切换newItem的内容...发生了一些逻辑,循环遍历另一个服务中的项目,匹配匹配它的属性并返回的项目那个项目。一切正常。这是控制器上的解析方法,它将检索到的项目设置为newItem:

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

newItem是在父控制器中更新的值。我可以在登录到控制台时看到更新的值,但不能在指令中看到。

我有什么遗失的东西吗?我相信&#39; =&#39;应该执行双向绑定。

1 个答案:

答案 0 :(得分:0)

我忽略了变量上的$ rootScope:这解决了这个问题。

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