私のケースでは、親コントローラにデータを送る方法は？

Question

こんにちは私は指示の中の値に基づいてHTMLを制御しようとしています。

//myCtrl.isLoad was set to false 
<img ng-src="{{myCtrl.url}}" imageonload></img> 
<div ng-if="myCtrl.isLoad">Show me</div> 

指令：

angular.module('myApp') 
     .directive('imageonload', imageonloadFunction); 

    function imageonloadFunction() { 
     var directive = { 
      'link': link,     
      'restrict': 'A' 
     }; 

     return directive; 
    } 

    function link($scope, element, attrs) { 
     some other codes..   
     //Do something if the condition is met 
     //and change myCtrl.isLoad = true so 
     //<div ng-if="myCtrl.isLoad">Show me</div> 
     //will show 
    } 

私は最善の方法は、親に指示データをバインドすることを確認していない

は、私はこのようなHTMLを持っています。誰もそれについて私を助けることができますか？どうもありがとう！

Answer 1

コントローラプロパティをディレクティブにバインドするだけで済みます。

angular.module('myApp', []) 
 
     .directive('imageonload', imageonloadFunction); 
 

 
    function imageonloadFunction() { 
 
     var directive = { 
 
      'link': link, 
 
      'scope': { 
 
       'isLoad': '=' 
 
      }, 
 
      'restrict': 'A' 
 
     }; 
 

 
     return directive; 
 
    } 
 

 
    function link($scope, element, attrs) { 
 
     $scope.isLoad = true; 
 
     //Do something if the condition is met 
 
     //and change myCtrl.isLoad = true so 
 
     //<div ng-if="myCtrl.isLoad">Show me</div> 
 
     //will show 
 
    }

//myCtrl.isLoad was set to false 
 
<img ng-src="{{myCtrl.url}}" imageonload is-load="myCtrl.isLoad"></img> 
 
<div ng-if="myCtrl.isLoad">Show me</div>

Answer 2

表示Loaderの場合は画像のロード。 HTMLで

：

<img src="img/loading.gif" imageload="{{myCtrl.url}}"> 

指令：

.directive('imageload', function() { 
     return { 
      restrict: 'A', 
      scope: { 
       imageload: '@' 
      }, 
      link: function(scope, element, attrs) { 
       element.one('load', function() { 
        element.attr('src', scope.imageload); 

       }); 
      } 
     }; 
    })