zoukankan      html  css  js  c++  java
  • AngularJS的指令用法

    scope的绑定策略:

    @ :把当前属性作为字符串传递,你还可以绑定来自外层scope的值,在属性值中插入 {{}}即可

    示例代码:

    scopeAt.html

    <!doctype html>
    <html ng-app="MyModule">
    <head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="css/bootstrap-3.0.0/css/bootstrap.css">
    </head>
    <body>
    <div ng-controller="MyCtrl">
    <drink flavor="{{ctrlFlavor}}"></drink>
    <fruit food="{{ctrlFood}}"></fruit>
    </div>
    </body>
    <script src="framework/angular-1.3.0.14/angular.js"></script>
    <script src="ScopeAt.js"></script>
    </html>

    scopeAt.js

    var myModule = angular.module("MyModule", []);
    myModule.controller('MyCtrl', ['$scope', function($scope){
    $scope.ctrlFlavor="百威";
    $scope.ctrlFood="香蕉";
    }])
    myModule.directive("drink", function() {
    return {
    restrict:'AE',
    scope:{
    flavor:'@'
    },
    template:"<div>{{flavor}}</div>"
    // ,
    // link:function(scope,element,attrs){
    // scope.flavor=attrs.flavor;
    // }
    }
    });

    myModule.directive("food", function() {
    return {
    restrict:'AE',
    scope:{
    food:'@'
    },
    template:"<div>{{food}}</div>"

    }
    });

  • 相关阅读:
    css3渐变色
    css3背景
    css3边框
    css3弹性盒子
    计算机概论
    中断和异常的处理与抢占式多任务
    分页机制和动态页面分配
    任务切换
    任务的隔离和特权级保护
    程序的动态加载和执行
  • 原文地址:https://www.cnblogs.com/klsw/p/5023316.html
Copyright © 2011-2022 走看看