<!DOCTYPE HTML> <html> <head> <title> 测试页 </title> <meta charset="utf-8"> </head> <body ng-app="myApp"> <div ng-controller="query"> <input id="input" ng-model="text"> <span ng-bind="text"></span> <button ng-click="submit()">提交</button> </div> <div class="select" ng-controller="select"> <span ng-click="spanClick()" ng-bind="value"></span> <ul ng-hide="show"> <li ng-repeat="l in list" ng-bind="l" ng-click="liClick($index)"></li> </ul> </div>
<script src="http://www.hubwiz.com/scripts/angular.min.js"></script>
</body> </html>
JS 部分
var myApp = angular.module("myApp", []); myApp.service("validator", function(){ return function(str, type){ return !!str; } }); myApp.controller("query", ["$scope", "validator", function($scope, validator){ //$scope.abc = abc; console.log(abc); $scope.text ="hello"; $scope.submit = function(){ console.log('sbumit'); var input = document.getElementById("input"); if(!validator(input.value)){ console.log('请输入用户名'); }else{ console.log('ok'); } } }]); myApp.controller("select", function($scope){ $scope.show = true; $scope.value = "请选择"; $scope.spanClick = function(){ $scope.show = !$scope.show; } $scope.list = ["1", "2","3"]; $scope.liClick = function(index){ $scope.value = $scope.list[index]; } });
一些基础指令练习。
昨天在跟着视频练习时，遇到了不能使用纯function 定义controller 的情况，我想应该是新版不支持了吧？
每天进步一点点。