<!DOCTYPE html> <html> <head> <meta name="description" content="[add your bin description]"> <meta charset="utf-8"> <title>JS Bin</title> <script src="http://apps.bdimg.com/libs/angular.js/1.4.0-beta.4/angular.min.js"></script> <script>
//directive文件directives.js中定义一个myTest
//定义一个模块 angular.module('myApp',[]), 获取一个模块 angular.module('myApp')
var phonecatDirectives = angular.module('phonecatDirectives', []);
//定义一个指令
phonecatDirectives.directive('myTest', function() { return { restrict: 'ACEM', require: '^ngModel', scope: { ngModel: '=' //变量 数据绑定 }, template: '<div><h4>Weather for {{ngModel}}</h4></div>' } }); //controller文件controller.js中定义directive1 定义控制器 var dtControllers = angular.module('dtControllers', []); dtControllers.controller('directive1',['$scope', function($scope) { $scope.name = 'this is tank test'; } ]); //在app文件app.js中整合controller,directive 模块 var phonecatApp = angular.module('phonecatApp', [ 'phonecatDirectives', 'dtControllers' ]); </script> </head> <body ng-app="phonecatApp"> <div ng-controller="directive1"> <input type="text" ng-model="city" placeholder="Enter a city" /> <my-test ng-model="city" ></my-test> <span my-test="exp" ng-model="city"></span> <!-- directive: my-test exp --> <span ng-model="city"></span> </div> </body> </html>