angular js 实例参数学习

最新推荐文章于 2025-08-18 20:17:18 发布

weixin_33736048

最新推荐文章于 2025-08-18 20:17:18 发布

阅读量111

点赞数

文章标签： javascript ViewUI

本文介绍了一个使用AngularJS实现的简单示例，通过自定义指令(myTest)和控制器(directive1)来展示双向数据绑定及DOM操作的基本用法。示例中定义了一个输入框用于接收城市名称，并通过指令显示该城市的天气。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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