角カスタムディレクティブ双方向バインディングがuibモーダル内で動作しない

Question

私はuib-modal内でカスタムディレクティブの双方向バインディングに問題があります。 ディレクティブはuib-modalスコープからモデル変数を取得しますが、変更された場合、uib-modalのモデルは適用されません。

I console.logスコープとを使用しているuib-modalスコープにアクセスするための指示を持っています...何らかの理由で双方向バインディングが機能していません。それが働いている

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

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

それは

はなぜ2つの方法はない結合ます。..問題のために良い解決策のように見えるしていません。今、私はディレクティブモデル属性を使用してeval()を実行するために

正しく働く？それは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; 
};