2
У меня есть проект, основанный на https://github.com/driftyco/ionic-starter-sidemenuANGULAR директивы инициализируется дважды
Я сделал директиву rsNotification для обрабатывать предстоящий MQTT сообщение
rsNotification.js
(function (angular) {
console.log("*** rsNotification module init");
var rsNotificationModule = angular.module('rsNotification', ['rsMessenger']);
var NotificationController = ['$log', '$scope', 'MessengerService', function ($log, $scope, MessengerService) {
console.log("*** NotificationController init", $scope);
$scope.badgeCount = 0;
$scope.$on('rsMQTT.message', function (event, message) {
$scope.badgeCount++;
MessengerService.post(message.toString());
});
}];
rsNotificationModule.directive('rsNotification', function() {
console.log("*** Loading template");
return {
restrict: 'E',
templateUrl: 'templates/rs-notification.html',
controller: NotificationController
};
});
})(angular);
В приложения .js У меня есть следующая конфигурация для стартер модуль
$stateProvider
.state('app', {
url: "/app",
abstract: true,
templateUrl: "templates/menu.html",
controller: 'AppCtrl'
})
.state('app.dashboard', {
url: "/dashboard",
views: {
'menuContent': {
templateUrl: "templates/dashboard.html",
controller: 'DashboardController'
}
}
})
// if none of the above states are matched, use this as the fallback
$urlRouterProvider.otherwise('/app/dashboard');
... и директива RS-notification.html
<button class="button button-clear">
<span class="fa fa-flag-o fa-2x"></span>
</button>
<span class="rs-badge danger" ng-show="badgeCount > 0">{{badgeCount}}</span>
RS-уведомление директива используется в menu.html шаблон внутри ионного -nav-bar
<ion-side-menus enable-menu-with-back-views="false">
<ion-side-menu-content>
<ion-nav-bar class="rs-header">
<ion-nav-back-button>
</ion-nav-back-button>
<ion-nav-buttons side="left">
<button class="button button-icon button-clear ion-navicon color-primary-light" menu-toggle="left"></button>
</ion-nav-buttons>
<ion-nav-buttons side="right">
<div>
<button class="button button-clear" ng-click="showCart()">
<span>{{cartName}}</span>
<span class="fa fa-shopping-cart fa-2x color-primary-dark"></span>
</button>
</div>
<rs-notification></rs-notification>
</ion-nav-buttons>
</ion-nav-bar>
<ion-nav-view name="menuContent"></ion-nav-view>
</ion-side-menu-content>
<!-- Left menu... -->
</ion-side-menus>
Проблема заключается в том, что rsMQTT.message событие вызывается дважды для каждого предстоящего сообщения, так как по сути NotificationController является instatiated дважды, как вы можете увидеть в журнале консоли:
*** rsNotification module init
*** NotificationController init
*** NotificationController init
*** Loading template
Я не уверен, что это проблема вашего компонента, но, возможно, в родительской директиве. Попытайтесь разместить свой компонент на более высоких уровнях, чтобы убедиться, что это тот же результат. –
Вы правы @Werlang, что это происходит, только когда я добавляю _rs-notification_ внутри _ion-nav-buttons_! – mattevigo
Я бы сообщал об ошибке в команде Ionic (если вы еще этого не сделали) –