// вместо
$scope.$apply(/* some code */);
// пишут
$scope.$$phase || $scope.$digest();<!DOCTYPE html>
<html data-ng-app="app">
<head>
<script src="https://code.angularjs.org/1.3.15/angular.js"></script>
<script>
window.templates = [
{
"layout" : "<div><h1>{{name}}</h1><p ng-repeat='item in items'>{{item.name}}</p></div>",
"name": "items",
"items" : [
{"name" : "item 1"},
{"name" : "item 2"}
]
}
];
</script>
<script src="script.js"></script>
</head>
<body>
<div data-banner="items"></div>
</body>
</html>angular.module('app', [])
.config(function($provide) {
$provide.constant('bannerTemplates', window.templates);
})
.directive('banner', function($compile, bannerTemplates) {
return {
// Изолируем scope
scope: {},
link: function(scope, elem, attrs) {
// Ключ баннера
var bannerName = attrs.banner,
banner;
// Находим объект баннера
for (var i = 0, ii = bannerTemplates.length; i < ii; ++i) {
// Сохраняем в переменную
banner = bannerTemplates[i];
// Если нашли - останавливаем цикл
if (banner.name === bannerName) {
break;
}
}
// Добавляем данные в scope
angular.extend(scope, banner);
// Компилируем шаблон, получаем jQuery/jqLite объект
var html = $compile(banner.layout)(scope);
// Вставляем в контейнер
elem.append(html);
}
};
});<!-- before directive -->
<input type="text" name="name" value="0" rt-number />
<!-- after directive -->
<input type="text" name="name" value="0" rt-number>
<div class="wrap" ng-transclude></div>
</input>scope.$on('$destroy', function() {
elem.tooltip('destroy');
}function FooCtrl($rootScope) {
this.someMethod = function() {
// some code ...
if (someCondition) {
$rootScope.$emit('someEvent');
}
}
}
function BarCtrl($scope, $rootScope) {
var deregFn = $rootScope.$on('someEvent', function() {
// some code ..
};
$scope.$on('$destroy', function() {
deregFn();
});
}<script>
window.$$userData = <?= json_encode($_SESSION['user']); ?>;
</script>
<script src="/path/to/angular.js"></script>
<script src="/path/to/app.js"></script>app.config(['$provide', function($provide) {
$provide.constant('userData', angular.copy(window.$$userData));
}]);app.service('Foo', function($q, $http) {
// Promise cache
var cache = {};
// Consider we've some url
var API_URL = '/api/v1/';
/**
* Get friends data
*/
this.getFriendsData = function() {
return apiCall('getFriendsData');
};
/**
* Get upcoming events
*/
this.getUpcomingEvents = function() {
return apiCall('getUpcomingEvents', {since: Date.now()});
};
function apiCall(method, params) {
// Check internal cache
if (!cache[method]) {
// Create new deferred for method
var deferred = $q.defer();
cache[method] = deferred.promise;
// Merge params
// e.g. some tokens/keys may exist in default params
var data = {params: angular.extend({}, params)};
// Process request
$http.get(API_URL + method, data).then(function(response) {
deferred.resolve(response);
});
}
return cache[method];
}
});
app.controller('FirstCtrl', function(Foo) {
// viewmodel reference
var vm = this;
Foo.getFriendsData().then(function(friendsData) {
vm.friendsData = friendsData;
});
});
app.controller('SecondCtrl', function(Foo) {
// viewmodel reference
var vm = this;
Foo.getUpcomingEvents().then(function(upcomingEvents) {
vm.upcomingEvents = upcomingEvents;
});
Foo.getFriendsData().then(function(friendsData) {
// $http.get won't be called, getting data from promise cache
vm.friendsData = friendsData;
});
});function MyCtrl($scope, MyService) {
$scope.data = MyService.getData();
}
angular.module('myapp').controller('MyCtrl', MyCtrl);MyCtrl.$inject = ['$scope', 'MyService'];
function MyCtrl($scope, MyService) {
$scope.data = MyService.getData();
}
angular.module('myapp').controller('MyCtrl', MyCtrl);function MyCtrl($scope, MyService) {
$scope.data = MyService.getData();
}
angular.module('myapp')
.controller('MyCtrl', ['$scope', 'MyService', MyCtrl]);