Angular.js 指令 & Controller

来源：互联网发布：淘宝天刀代购会被骗么编辑：程序博客网时间：2024/05/16 18:33

<!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');});}}});    //controllerfunction 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>

0 0