<!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 实例参数学习的更多相关文章

  1. 关于Angular.js Routing 的学习笔记(实现单页应用)

    最近开始学习angular.js,发现angular.js确实很方便,也很强大.在看到 AngularJS Routing and Multiple Views 这一部分的时候,有点乱.现在通过记录一 ...

  2. Angular.js 以及个人学习网站

    Angular.js  教程 http://www.360doc.com/content/14/0414/15/14416931_368816305.shtml web前端学习: 慕课网:http:/ ...

  3. Angular.js之Router学习笔记

    <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...

  4. Angular.js之指令学习笔记

    <!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"& ...

  5. 史上最全的Angular.js 的学习资源

    Angular.js 的一些学习资源 基础 官方: http://docs.angularjs.org angularjs官方网站已被墙,可看 http://www.ngnice.com/: 官方zi ...

  6. Angular JS 学习之路由

    1.AngularJS路由允许我们通过不同的URL访问不同的内容:通过AngularJS可以实现多视图的单页WEB访问(SPA) 2.通常我们的URL形式为http://runoob.com/firs ...

  7. 学习angular.js的一些笔记想法(上)

    1.data-ng-app与ng-app的区别 data-ng-app是为了h5不报错 2.ng-class 不多说就来拿例子说吧 html代码 <div class='color-change ...

  8. Angular.js学习笔记（三）

    一.过滤器 1.uppercase,lowercase 大小写转换{{ "lower cap string" | uppercase }} // 结果:LOWER CAP STRI ...

  9. angular.js学习的第一天

    第一天对angular.js进行学习,肯定是面对的入门的最简单的实例: 实现下面的这个效果,首先需要在html页面引入angular.js,在下面的div中,ng-app则表示在当前div是一个ang ...

随机推荐

  1. 虚拟机移动后重启网络时提示Device does not seem to be present

    Wmware虚拟机硬盘文件位置移动之后,重新引入到Wmware workStation中, 通过命令ifconfig...没有看到eth0..然后重启网卡 #service network resta ...

  2. spring配置事务

    一.配置JDBC事务处理机制 <!-- 配置Hibernate事务处理 --> <bean id="transactionManager" class=" ...

  3. SQL语言笔记

      字符串用单引号',判断用单等号=,两个单引号''转义为一个单引号' 不等号是<> 不区分大小写 []括起来的要不是关键字,要不是非法变量,比如空格隔起来的变量   创建与删除数据库 - ...

  4. mysql 常用操作

    添加用户并设置权限: grant all on *.* to root@‘%’ identified by ‘123456’with grant option; all:所有权限 select,ins ...

  5. Capsule：开源的 JVM 应用部署工具

    [编者按]本文作者 Ron Pressler 是 Parallel Universe 公司的创始人,拥有着丰富的高性能开发经验.通过这篇文章,Ron 向大家详细介绍了全新的开源 JVM 部署工具--C ...

  6. 在 tornado 中异步无阻塞的执行耗时任务

    在 tornado 中异步无阻塞的执行耗时任务 在 linux 上 tornado 是基于 epoll 的事件驱动框架,在网络事件上是无阻塞的.但是因为 tornado 自身是单线程的,所以如果我们在 ...

  7. POJ2513Colored Sticks

    http://poj.org/problem?id=2513 题意 : 一些木棒,两端都涂上颜色,求是否能将木棒首尾相接,连成一条直线,要求不同木棒相接的一边必须是相同颜色的. 思路 : 这个题的话就 ...

  8. 天灵灵，地灵灵，但愿这个一定灵！！！python调用win32api，启动应用程序窗口

    这个是逼到没办法,C#那一套,一点基本没有. 还好,网上找到例程,可以指定帐户启动进程,但愿可以摆脱WIN SERVICE启动产生的SESSION 0 隔离问题. 因为这个问题,以SERVICE启动的 ...

  9. [Ruby on Rails系列]6、一个简单的暗语生成器与解释器（上）

    [0]Ruby on Rails 系列回顾 [Ruby on Rails系列]1.开发环境准备:Vmware和Linux的安装 [Ruby on Rails系列]2.开发环境准备:Ruby on Ra ...

  10. hdu 4465 Candy 数学

    思路:易知结果为 ∑(n-k)*C(n+k,k)*(p^(n+1)*q^k+q^(n+1)*p^k). 注意不能直接算,注意点技巧!!!看代码 代码如下: #include<iostream&g ...