Angular.js 指令 & Controller

最新推荐文章于 2018-10-24 20:27:50 发布

孙大大

最新推荐文章于 2018-10-24 20:27:50 发布

阅读量2.7k

点赞数

分类专栏： Angular.js

本文链接：https://blog.csdn.net/suncaishen/article/details/38894755

版权

Angular.js 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

<!doctype html>
<html ng-app="myapp">
    <head>
        <script src="angular.min.js"></script>
		<script>
		    var app = angular.module('myapp',[]);   

			app.directive('helloWorld',function(){
				return {
				    //scope: true, //使用一个继承父作用域的自作用域   
					restrict: 'E',
					replace: true,
					template: '<h3 style="background-color:{{name}}">Hello World!</h3>',
					link: function(scope,elem,attr){
						elem.bind('click',function(){							
							scope.$apply(function(){
								scope.name="red"	
							});		
						});
						elem.bind('mouseover',function(){
							elem.css('cursor','pointer');
						});
					}
				}
			});
		
		    //controller
			function PhoneListCtrl($scope) {
			  $scope.phones = [
				{"name": "Nexus S",
				 "snippet": "Fast just got faster with Nexus S."},
				{"name": "Motorola XOOM? with Wi-Fi",
				 "snippet": "The Next, Next Generation tablet."},
				{"name": "MOTOROLA XOOM?",
				 "snippet": "The Next, Next Generation tablet."}
			  ];
			  $scope.name="sunjian"
			  
			}
			
			
		</script>
    </head>
    <body ng-controller="PhoneListCtrl">
	    <input  ng-model="name">
        <ul>
			<li ng-repeat="phone in phones"  ng-dragstart="dragStart()">
			  {{phone.name+' '+name}}
			  <p>{{phone.snippet}}</p>
			</li>
		</ul>
		<hr/>
		<hello-world></hello-world>   
		<div hello-world></div>
    </body>
</html>