角度自定義指令雙向綁定不工作裏面的烏鴉模態

Question

我有自定義指令雙向模式綁定內部的困難。 該指令從uib-modal範圍獲取模型變量，但在更改時，uib-modal中的模型未應用。

我範圍並獲得指令訪問uib模式範圍只使用$scope.$parent.$parent ...出於某種原因，雙向綁定不起作用。

現在我使用的指令模式屬性執行eval()：

link: function (scope, element, attrs, ctrls) { 
    scope.uibScopeModel = attrs.ngModel; 
} 

eval('$scope.$parent.$parent.' + $scope.uibScopeModel + ' = $scope.model'); 

它的工作，但它似乎並不像對這個問題的很好的解決方案..

爲何雙向綁定不好好工作？這是uib-modal的已知問題嗎？如何解決？

我的自定義指令：

angular.module('mean.upload').directive('uploadDirective', function (Upload) { 
    return { 
     restrict: 'E', 
     require: 'ngModel', 
     scope: { 
      model: '=ngModel', // the model 
      type: '@type', // type of upload (imageSingle/fileSingle) 
      required: '@required', // 
      fileTypeAccept: '@fileTypeAccept', 
     }, 
     templateUrl: function (elem, attr) { 
      switch (attr.type) { 
       case 'imageSingle': 
        return '/upload/views/directive_templates/image-single.tpl.html'; 
       case 'fileSingle': 
        return '/upload/views/directive_templates/file-single.tpl.html'; 
      } 
     }, 
     link: function (scope, element, attrs, ctrls) { 
      scope.uibScopeModel = attrs.ngModel; 
     }, 
     controller: function ($scope, $rootScope) { 
      $scope.uploader = Upload.getDefaultUploader(); 
      $scope.uploader.onCompleteItem = function (item, response, status, headers) { 
       if ($scope.type === 'imageSingle') { 
        $scope.model = Upload.uploadPath + response.filename; 
       } else if ($scope.type === 'fileSingle') { 
        $scope.model = { 
         src: Upload.uploadPath + response.filename, 
         name: item.file.name, 
         type: item.file.type 
        }; 
       } 
       eval('$scope.$parent.$parent.' + $scope.uibScopeModel + ' = $scope.model'); 
      } 
     } 
    } 
}); 

標記：

<upload-directive 
     ng-model="file" 
     type="fileSingle" 
     file-type-accept="application/pdf"> 
</upload-directive> 

指令模板：

<div nv-file-drop uploader="uploader"> 
    <div class="well drop-zone" nv-file-over uploader="uploader"> 
     <div class="row" ng-show="model"> 
      <div class="uploaded-file-teaser col-sm-6 col-sm-offset-3 validation-icon-container"> 
       <div class="teaser-edit-buttons"> 
        <button class="btn btn-xs" ng-click="model=null"> 
         <i class="fa fa-trash"></i> 
        </button> 
       </div> 
       <div class="file-container type-{{model.name | extension}}"> 
        <p><i class="fa"></i></p> 
        <a href="{{model.src}}" target="_blank" title="{{model.name}}"> 
         {{model.name | filename }}.{{model.name | extension}} 
        </a> 
       </div> 
      </div> 
     </div> 
     <p ng-show="!model">Drop file here</p> 
     <div nv-file-drop uploader="uploader" class="input-file-container"> 
      <button class="btn btn-success btn-large"> 
       <i class="fa fa-upload"></i> {{ buttonText || 'Upload File' }} 
      </button> 
      <input class="browse-image-btn" type="file" nv-file-select 
        input-validation-upload ng-model="model" 
        uploader="uploader" accept="{{fileTypeAccept}}" 
        required="required"/> 
     </div> 
    </div> 
</div> 

Answer 1

我寫我自己的指令時，經歷了同樣的行爲。我的解決方案是根本不使用指令的作用域，並用函數更新作用域。

指令：

app.directive('sfTableHeader', function() { 
    return { 
    restrict: 'A', 
    scope: false, 
    template: '<div><a ng-click="updateScope(1234567)">click me</a></div>' 
    } 
}); 

控制器：

$scope.updateScope = function(someNumber) { 
    $scope.number = someNumber; 
};