Eğik - yönergesi

Question

Ben Örnek için dinamik İon başka direktif içine bir yönerge ekleyin çalışıyorum derlenmiş önce dynamicly bir yönerge için, derlenmiş html pasajını ekleyin: Ben bunu yapmaya çalışıyorum

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

Bu daha derin olan başka bir direktiften. codepen numaralı telefondan deneyin.

Geçmiş: my-directive dinamik my-directive kontrol edebilirsiniz navbar için bir düğme, eklediği Ben bir yere derin my-directive kullanırsanız o, istiyorum.

Düzenleme: Tekrar codepen 2 denedim, ancak bazı sorunlar hala vardır:

• direktif bulunmayan bir sayfaya gitmeden, düğme aynı zamanda kaldırılmalıdır.
• Sadece direktifin bulunduğu sayfada doğrudan başladığınızda buton görünür. Başka bir yere başlarsanız ve ona doğru giderseniz, işe yaramıyor.
• Bir yerde 0 milisaniye beklediğim $ timeout'um var, çalışmıyor, ancak bu neden gerekli olmalıdır.

Answer 1

Navbarınız için bir yönerge oluşturabilir ve işaretlemeyi yönergesinin etki alanı kapsamına geçirebilirsiniz.

Geçiş, $rootScope ile veya bir fabrika ile yapılabilir. Bir fabrikayı tercih ederim ama demoda rootScope'u geçmek için kullandım.

Ayrıca demoda geçen kapsamı da beğenmiyorum. Çalışıyor ama işleyiciyi de bir fabrikada depolamanın daha iyi olacağını düşünüyorum. Fabrika daha sonra navbardaki simgenin oluşturulmasını ve düğme için ihtiyaç duyduğunuz eylem için olay işleyicisini yönetebilir.

Lütfen aşağıdaki demoya veya bu codepen ürününe bakın.

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>