JSFiddle - React, Tailwind, and code Playground
HTML
<script src="http://code.angularjs.org/1.1.5/angular.min.js"></script>
<div ng-app="app">
<!--
1. Запустить фидл
2. Нажать "Controller.broadcast()" и см. в консоль
3. Нажать "Controller.toggle()" и см. в консоль
4. Нажать "Controller.broadcast()" и см. в консоль
-->
<!-- Все, что внутри директивы "ng-if" не будет срабатывать и принимать события до тех пор, пока ng-if="true" -->
<div ng-if="model.toggle">
<div ng-controller="NgIfController">
<div ng-show="Controller.test()"></div>
</div>
</div>
<!-- Внутри директивы "ng-show" вычисления будут производится в любом случае -->
<div ng-show="model.toggle">
<div ng-controller="NgShowController">
<div ng-show="Controller.test()"></div>
</div>
</div>
<input type="text" ng-model="model.toggle" readonly />
<br/>
<input type="button" ng-click="Controller.toggle()" value="Controller.toggle()" />
<br/>
<input type="button" ng-click="Controller.broadcast()" value="Controller.broadcast()" />
</div>
JavaScript
angular
.module('app', [])
.run(function($rootScope) {
var model = $rootScope.model = {
toggle: false
};
var controller = $rootScope.Controller = {
toggle: function() {
model.toggle = !model.toggle;
},
broadcast: function() {
$rootScope.$broadcast('my:event');
}
};
})
.controller('NgIfController', function($scope) {
var controller = $scope.Controller = {
test: function() {
console.log( 'NgIfController:Controller:test' );
}
};
$scope.$on('my:event', function() {
console.log( 'NgIfController:my:event' );
});
console.log( 'NgIfController:Init' );
})
.controller('NgShowController', function($scope) {
var controller = $scope.Controller = {
test: function() {
console.log( 'NgShowController:Controller:test' );
}
};
$scope.$on('my:event', function() {
console.log( 'NgShowController:my:event' );
});
console.log( 'NgShowController:Init' );
});