Angular - kompilierte HTML-Schnipsel hinzufügen, dynamicly auf eine Richtlinie, bevor die Richtlinie

Question

kompiliert wird

Ich versuche, eine Richtlinie in einer anderen Richtlinie dynamisch in Ionic für Beispiel hinzuzufügen:

<ion-nav-buttons side="right"> 
    // If the page has my-directive, add here a my-button to control it 
</ion-nav-buttons> 

ich zu tun bin versucht, dies aus einer anderen Richtlinie, die tiefer ist. mein Versuch auf codepen.

Hintergrund: Ich möchte, dass, wenn ich my-directive irgendwo tiefer verwenden, dass my-directive fügt dynamisch eine Schaltfläche, um die navbar, die die my-directive steuern kann.

Edit: Ich versuchte es wieder codepen 2, aber es gibt noch einige Probleme:

• Wenn auf eine Seite gehen, wenn die Richtlinie nicht vorhanden ist, sollte die Taste auch entfernt werden.
• Die Schaltfläche wird nur angezeigt, wenn Sie direkt auf der Seite beginnen, auf der sich die Anweisung befindet. Wenn Sie woanders anfangen und dorthin navigieren, funktioniert es nicht.
• Irgendwo habe ich ein $ Timeout, das 0 Millisekunden wartet, funktioniert nicht ohne, aber warum sollte das notwendig sein.

Answer 1

Sie könnten eine Direktive für Ihre Navigationsleiste erstellen und die Markierung an den isolierten Bereich der Richtlinie übergeben.

Übergeben kann mit $rootScope oder mit einer Fabrik durchgeführt werden. Ich würde eine Fabrik bevorzugen, aber in der Demo habe ich das rootScope zum Übergeben verwendet.

Ich mag auch nicht das Scope vorbei in der Demo. Es funktioniert, aber ich denke, es wäre besser, den Handler auch in einer Fabrik zu lagern. Die Factory kann dann die Erstellung des Symbols in der Navigationsleiste und den Ereignishandler für die Aktion verwalten, die Sie für die Schaltfläche benötigen.

Bitte sehen Sie sich die folgende Demo an oder in dieser codepen.

angular.module('ionicApp', ['ionic']) 
 

 
.config(function($stateProvider, $urlRouterProvider, $ionicConfigProvider) { 
 
    
 
    $ionicConfigProvider.views.swipeBackEnabled(false); 
 
    $ionicConfigProvider.views.maxCache(0); 
 
    
 
    $stateProvider 
 
    .state('eventmenu', { 
 
     url: "/event", 
 
     abstract: true, 
 
     templateUrl: "templates/event-menu.html" 
 
    }) 
 
    .state('eventmenu.home', { 
 
     url: "/home", 
 
     views: { 
 
     'menuContent' :{ 
 
      templateUrl: "templates/home.html" 
 
     } 
 
     } 
 
    }) 
 
    .state('eventmenu.checkin', { 
 
     url: "/check-in", 
 
     views: { 
 
     'menuContent' :{ 
 
      templateUrl: "templates/check-in.html", 
 
      controller: "CheckinCtrl" 
 
     } 
 
     } 
 
    }) 
 
    .state('eventmenu.attendees', { 
 
     url: "/attendees", 
 
     views: { 
 
     'menuContent' :{ 
 
      templateUrl: "templates/attendees.html", 
 
      controller: "AttendeesCtrl" 
 
     } 
 
     } 
 
    }) 
 
    
 
    $urlRouterProvider.otherwise("/event/home"); 
 
}) 
 

 
.controller('MainCtrl', function($scope, $ionicSideMenuDelegate) { 
 
    $scope.toggleLeft = function() { 
 
    $ionicSideMenuDelegate.toggleLeft(); 
 
    }; 
 
}) 
 

 
.controller('CheckinCtrl', function($scope) { 
 
    $scope.$on('$ionicView.afterEnter', function() { 
 
    console.log('entered'); 
 
    }); 
 
}) 
 

 
.controller('AttendeesCtrl', function($scope) { 
 
}) 
 
.directive('dynNavbar', function($compile) { 
 
    return { 
 
    scope: { 
 
     optional: '=' 
 
    }, 
 
    template: '<button class="button button-icon button-clear ion-navicon" menu-toggle="left"></button><div class="dynButton"/>', 
 
    link: function(scope, element) { 
 
     scope.$watch('optional', function(){ 
 
     var dynButton = scope.optional; 
 
     console.log(scope.optional, element, element[0].querySelector('.dynButton'), $compile(dynButton.html)(scope)); 
 
     angular.element(element[0].querySelector('.dynButton')).replaceWith($compile(dynButton.html)(dynButton.scope)); 
 
     }); 
 
     
 
    } 
 
    } 
 
}) 
 
.directive('test', function($compile) { 
 
    return { 
 
     restrict: 'E', 
 
     replace: true, 
 
     template: '<p ng-style="{color: styleFlag}">use this directive, with the button in the navbar</p>', 
 
     controller: function($scope, $rootScope) { 
 
      $rootScope.injectedButton = {html: '<a class="button button-icon icon ion-eye" ng-click="cry()"></a>', 
 
      scope: $scope 
 
      };    
 
      var styleFlag = false; 
 
      
 
      $scope.cry = function() { 
 
       console.log('buhuhuhu'); 
 
       styleFlag = !styleFlag; // change style just as example 
 
       $scope.styleFlag = styleFlag ? 'red': 'black'; 
 
       //console.log(styleFlag, $scope.styleFlag); 
 
      }; 
 
     }, 
 
     link: function(scope, el, attrs){ 
 
      
 
      // ----------------------------------- 
 
      // ADD BUTTON IN NAVBAR 
 
      // ----------------------------------- 
 
      //scope.$on('$ionicView.afterEnter', function(){ 
 
      /* var nav = document.getElementsByClassName('nav-bar-block'); 
 
       if (nav[0].getAttribute('nav-bar') == 'active' || nav[0].getAttribute('nav-bar') == 'entering') { 
 
        nav = angular.element(nav[0].getElementsByClassName('right-buttons')[0]); 
 
       } 
 
       if (nav[1] && nav[1].getAttribute('nav-bar') == 'active' || nav[1] && nav[1].getAttribute('nav-bar') == 'entering') { 
 
        nav = angular.element(nav[1].getElementsByClassName('right-buttons')[0]); 
 
       } 
 
       console.log(nav); 
 
       nav.append($compile('<a class="button button-icon icon ion-eye" ng-click="cry()"></a>')(scope)); 
 
      // }); 
 
*/ 
 
      // ----------------------------------- 
 
      // FUNCTION FOR THE BUTTON 
 
      // ----------------------------------- 
 
      /*scope.cry = function() { 
 
       console.log('buhuhuhu'); 
 
      };*/ 
 
     } 
 
    } 
 
});

<html ng-app="ionicApp"> 
 
    <head> 
 
    <meta charset="utf-8"> 
 
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width"> 
 

 
    <title>Side Menus</title> 
 

 
    <link href="//code.ionicframework.com/nightly/css/ionic.css" rel="stylesheet"> 
 
    <script src="//code.ionicframework.com/nightly/js/ionic.bundle.js"></script> 
 
    </head> 
 

 
    <body ng-controller="MainCtrl"> 
 

 
    <ion-nav-view></ion-nav-view> 
 

 
    <script id="templates/event-menu.html" type="text/ng-template"> 
 
     <ion-side-menus enable-menu-with-back-views="false"> 
 

 
     <ion-side-menu-content> 
 
      <ion-nav-bar class="bar-positive"> 
 
      <ion-nav-back-button></ion-nav-back-button> 
 

 
      <ion-nav-buttons side="left"> 
 
       <button class="button button-icon button-clear ion-navicon" menu-toggle="left"></button> 
 
      </ion-nav-buttons> 
 
      
 
      <ion-nav-buttons side="right"> 
 
       <!--<button class="button button-icon button-clear ion-navicon" menu-toggle="left"></button>--> 
 
       <dyn-navbar optional="injectedButton"/> 
 
      </ion-nav-buttons> 
 
      </ion-nav-bar> 
 

 
      <ion-nav-view name="menuContent"></ion-nav-view> 
 
     </ion-side-menu-content> 
 

 
     <ion-side-menu side="left"> 
 
      <ion-header-bar class="bar-assertive"> 
 
      <h1 class="title">Left Menu</h1> 
 
      </ion-header-bar> 
 
      <ion-content> 
 
      <ul class="list"> 
 
       <a href="#/event/check-in" class="item" menu-close>Check-in</a> 
 
       <a href="#/event/attendees" class="item" menu-close>Attendees</a> 
 
      </ul> 
 
      </ion-content> 
 
     </ion-side-menu> 
 

 
     </ion-side-menus> 
 
    </script> 
 

 
    <script id="templates/home.html" type="text/ng-template"> 
 
     <ion-view view-title="Welcome"> 
 
     <ion-content class="padding"> 
 
      home: <test></test> 
 
     </ion-content> 
 
     </ion-view> 
 
    </script> 
 

 
    <script id="templates/check-in.html" type="text/ng-template"> 
 
     <ion-view view-title="Event Check-in"> 
 
     <ion-content> 
 
      checkin: <test></test> 
 
     </ion-content> 
 
     </ion-view> 
 
    </script> 
 

 
    <script id="templates/attendees.html" type="text/ng-template"> 
 
     <ion-view view-title="Event Attendees"> 
 
     <ion-content> 
 
      attendees: <test></test> 
 
     </ion-content> 
 
     </ion-view> 
 
    </script> 
 

 
    </body> 
 
</html>