AngularJS - Bu yönerge yanlıştır Yüklü olarak aramak istiyorum

Question

Yönergeler oluşturdum çünkü sayfa yüklendiğinde bazı DOM manipülasyonlarını yapmak istiyorum. Ama sadece tetiklemez.

.directive("uponLoadFixes", onLoadFixes) 

HTML

<header class="header" ng-include="'partials/header.html'"> 
</header> 
<div id="idBreadcrumbs" ng-show="false"> 
    <li class="active">{{phase.title}}</li> 
</div> 
<div role="main" style="margin-top:110px"> 
    <a role="button" href="javascript:;" ng-model="collapsedMap" ng-click="collapsedMap=!collapsedMap"> 
     <h4 style="color: #7D0DD0;">PROJECT PHASE {{phase.title}}</h4> 
    </a> 
    <div id="divMap" style="border: 1px solid grey;width: 98%;border-radius: 4px;padding:3px"> 
    <upon-load-fixes></upon-load-fixes> 
     <table ng-show="collapsedMap" style="width:100%"> 
      <tbody> 
       <tr ng-repeat="stream in streams|myMapFilter:'order'" style="height: 30px"> 
        <td ng-style="{'width':'20%','padding-top':'1px'}" class="phase-stream-column-div"> 
         <div ng-style="{'background-color':stream.color,'margin-top':'2px'}" class="content-center-flex"> 
          {{stream.title}}</div> 
        </td> 
        <td class="phase-stream-column-div" style="padding-left: 2px !important;padding-top:2px !important"> 
         <div ng-style="{'background-color':stream.color,'cursor':'pointer'}" ng-repeat="stage in stages(stream.ukey).stages" ui-sref="stage" ng-click="openStage(stage)" class="content-center-flex"> 
          {{stage.title}} 
         </div> 
        </td> 
       </tr> 
      </tbody> 
     </table> 
    </div> 
</div> 

Herhangi işaretçiler bekliyoruz eşleştirilmiş nasıl Direktifi

function onLoadFixes(){ 
    return function (scope,element,attrs){ 
     $(element).on('load',function(event){ 
       console.log("element loaded"); 
       $(".breadcrumb-igdm").append($("#idBreadcrumbs").children()); 
       $("input").val(copyURLtoClipboard()); 
     });} 
} 

: İşte benim yönergesi fonksiyonudur.

header.html

<div class="navbar navbar-fixed-top"> 
    <table class="table" style="width: 100%;margin-bottom: 0px;background-color: white" role="presentation"> 
     <tbody> 
      <tr style="border-bottom-style: solid; border-bottom-color: rgb(192, 192, 192)"> 
       <td style="width: 10.0%;"><img alt="" src="img/iGDM_119_50.jpg"></td> 
       <td style="background-color: rgb(0, 64, 128)"><span style="text-align: left;vertical-align: "><span 
       style="nowrap: nowrap; width: 100%; text-align: right; font-weight: bold; color: rgb(255, 255, 255); font-size: 16pt" 
      >Page Name</span> </span> 
       </td> 
       <td style="width: 10.0%;"><img alt="" src="img/hcl_logo_50.jpg"></td> 
      </tr> 
     </tbody> 
    </table> 
    <div style="height: 30px;background-color: #f5f5f5;border-bottom: 1px solid grey;"> 
     <ol class="breadcrumb pull-left breadcrumb-igdm"> 
      <li><a href="#"><i class="fa fa-home" style="font-weight: 16px"></i>&nbsp;Home</a></li> 
      <li><a href="#">Waterfall</a></li> 
      <upon-load-fixes></upon-load-fixes> 
     </ol> 
     <ul class="list-inline pull-right breadcrumb"> 

      <li ngclipboard data-clipboard-target="#copyurl"> 
      <input type="text" id="copyurl" value=""><a href="javascript:;"><i class="fa fa-link" style="font-weight: 16px"></i>&nbsp;Copy URL</a></li> 
      <li ng-click="open()"><a href="#"><i class="fa fa-comment-o" style="font-weight: 16px"></i>&nbsp;Feedback</a></li> 
      <li><a href="#"><i class="fa fa-question-circle" style="font-weight: 16px"></i>&nbsp;Help</a></li> 
     </ul> 

    </div> 
</div> 

Yeni Yönergesi Eğer angularjs yük olayını kullanmak gerekmez

(function(angular) { 
    'use strict'; 

    var uponLoadFixes = function() { 
     function controller() { 

     } 

     function link(scope, element, attrs) { 
      console.log("doing something " + copyURLtoClipboard()); 
      element.append(angular.element(document.querySelector("#idBreadcrumbs")).children()); 
      angular.element(document.querySelector("#copyurl")).val(copyURLtoClipboard()); // get this function into the directive as well or make it a service 

     } 

     return { 
      restrict : 'E', 
      link : link, 
      controller : controller, 
      scope : {} 
     }; 
    }; 

    angular.module('myMappy').directive('uponLoadFixes', [ uponLoadFixes ]); 
})(angular); 

Answer 1

, burada

bir örnek, şunları yapmalısınız olduğunu takip etmeye çalışın,

(function (angular) { 
     'use strict'; 

     var uponLoadFixes = function() { 
      function controller() { 

      } 

      function link(scope, element, attrs) { 
       //here do something 
       var $$breadcrumb = element.find('.breadcrumb-igdm'); //try to fin the element with angularjs 
       $$breadcrumb.append($("#idBreadcrumbs").children()); 
       $("input").val(copyURLtoClipboard()); //get this function into the directive as well or make it a service 
      } 

      return { 
       restrict: 'E', 
       link: link, 
       controller: controller, 
       scope: {} 
      }; 
     }; 

     angular.module('') 
       .directive('uponLoadFixes', [uponLoadFixes]); 
    })(angular); 

Answer 2

Çalıştırma Blokları Çalıştırma blokları, Angular uygulamasında ana yönteme en yakın olanlardır. Bir çalıştırma bloğu, uygulamayı başlatmak için çalışması gereken koddur. Tüm servisler yapılandırıldıktan ve enjektör oluşturulduktan sonra yürütülür.

angular.module('myModule', []).  
    run(function(injectables) { // instance-injector 
     // This is an example of a run block. 
     // You can have as many of these as you want. 
     // You can only inject instances (not Providers) 
     // into run blocks 
    }); 

https://docs.angularjs.org/guide/module

Answer 3

sayesinde z.a için. Yönergesimi header.html'deki breadcrumb listesine taşıyarak ve onu bir öğe olarak kullanarak, beklendiği gibi çalışmaya başladı (ekranı düzeltmek gerekiyor). Herkesin aradığı yönerge için (eleman seçimi için) değiştirilen kodu ekledim.