web -- Angularjs 笔记

1. 自定义标签

<hello>Hello, Angular.</hello>
<script>
var myModule = angular.module("myModule", []);
myModule.directive("hello", function(){
return {
restrict: 'E',
template: "<div></div>",
replace:true
}
});
</script>
2. 多个控制器

<div ng-controller="CommonController">
<button ng-click="commonFn()">common</button>
</div>
<div ng-controller="Controller1">
<p>{{greeting.text}}, Angular.</p>
<button ng-click="control1()">controller1</button>
</div>
<script src="js/Angular.js"></script>
<script>
var app = angular.module("myApp", []);
app.controller("CommonController", function($scope){
$scope.commonFn = function(){
alert("common");
};
});
app.controller("Controller1", function($scope){
$scope.greeting = {
text:"Hello"
};
$scope.control1 = function(){
alert("Controller1");
}
});
</script>

// 多控制器的另一种实现方式

<div ng-controller="CommonController">
<button ng-click="commonFn()">common</button>
</div>
<div ng-controller="OneController">
<p>{{greeting.txt}}, Angular.</p>
<button ng-click="one()">Button</button>
</div>
<script src="js/angular-1.3.0.js"></script>
<script>
function CommonController($scope){
$scope.commonFn = function(){
alert("common");
};
}
function OneController($scope){
$scope.greeting = { txt:"Hi" };
$scope.one = function(){
alert("OneController");
};
}
</script>
3. rootScope

<div>
<div ng-controller="GreetCtrl">
Hello, {{name}}
</div>
<div ng-controller="ListCtrl">
<ol>
<li ng-repeat="x in names">name: {{x.name}}, country: {{x.country}}, hobby: {{hobby}}</li>
</ol>
</div>
</div>
<script src="js/angular-1.3.0.js"></script>
<script>
function GreetCtrl($scope, $rootScope){
$scope.name = "Angular.Angular";
$rootScope.hobby = "Angular";
}
function ListCtrl($scope){
$scope.names = [{name:"Ting", country:"Shanghai"},{name:"Juan", country:"Nanjing"}];
}
</script>

4. emit, boardcast

<div ng-controller="EventController">
Root scope
<tt>MyEvent</tt> count: {{count}}
<ul>
<li ng-repeat="i in [1]" ng-controller="EventController">
<button ng-click="$emit('MyEvent')">emit</button>
<button ng-click="$broadcast('MyEvent')">boardcast</button>
<br>
Middle scope
<tt>MyEvent</tt> count: {{count}}
<ul>
<li ng-repeat="item in [1, 2]" ng-controller="EventController">
Leaf scope
<tt>Event</tt> count: {{count}}
</li>
</ul>
</li>
</ul>
</div>
<script src="js/angular-1.3.0.js"></script>
<script>
function EventController($scope){
$scope.count = 0;
$scope.$on("MyEvent", function(){
$scope.count++;
});
}
</script>