angular js 实例参数学习

<!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>

巴特西

angular js 实例参数学习

最新文章

热门文章