Yapması ve DOM manipülasyonu için özel hizmetlerini kullanmak ve benim sorum da bu durumda ilgilidir UI farklı bölümlerinde aynı işlevselliği paylaşmak için angularjs yaygın bir uygulamadır ve şu şekilde olmaktadır: bir kenar çubuğu vardırAçısal servis değişiklikleri başka bir yerde nasıl ele alınabilir?
Uygulamamdaki bileşen ve tıklamadaki kenar çubuğunu en aza indirmek için bir düğme ama problem onların denetleyicilerinin farklı olmasıdır, bu yüzden sidebarService adlı aynı modülde bir hizmet oluşturdum ve bu hizmeti her iki denetleyiciye de enjekte ettim ancak veriler hizmette değişirken bir denetleyici tarafından bir olay Başka bir denetleyicide işleyemiyorum, bu nedenle nasıl yapılır:
app-module.js
(function() {
'use strict';
var app = angular.module('app', []);
});
kenar-service.js
(function() {
'use strict';
angular.module('app')
.factory('sidebarService', function() {
var showClass = false;
return {
toggle: function() {
showClass = !showClass;
},
isClassShown: function() {
return showClass;
}
};
});
});
uygulama-controller.js
(function() {
'use strict';
angular.module('app')
.controller('App', ['sidebarService', function(sidebarService) {
var appVm = this;
appVm.isClassShown = function() {
return sidebarService.isClassShown();
};
}]);
});
Navbar'ın controller.js
(function() {
'use strict';
angular.module('app')
.controller('Navbar', ['sidebarService', function(sidebarService) {
var navbarVm = this;
navbarVm.toggleSidebar = function() {
sidebarService.toggle();
};
}]);
})();
index.html
<!DOCTYPE html>
<html ng-app="app">
<head>
<title>My App</title>
<!-- ... -->
</head>
<body ng-controller="App as app">
<ul ng-controller="Navbar as navbar">
<li>
<a href="#" ng-click="navbar.toggleSidebar()">Toggle Sidebar</a>
</li>
<!-- ... -->
</ul>
<div class="sidebar" ng-class="{mini:app.isClassShown()}">
<!-- ... -->
</div>
</body>
</html>