我有这些代码示例,我目前正在尝试学习它之前运行良好的角度js但现在它根本不工作 有人可以帮助我做对 //INDEX.HTML
<html>
<head lang="en">
<meta charset="UTF-8">
<title>AngularJS Tutorial</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.4/angular.min.js"></script>
<script src="app.js"></script>
<script src="main.ctrl.js"></script>
</head>
<body ng-app="app" ng-controller="MainController as main">
<div class="container">
<h1>{{main.titlex}}</h1>
<div class="input-group-addon">
<span class="glyphicon glyphicon-search"></span>
<input type="text" class="form-control" ng-model="main.searchInput">
</div>
<p>{{main.searchInput}}</p>
</div>
</body>
</html>
// app.js
angular.module('app',[]);
// main.ctrl.js
angular.module('app').controller("MainController",function(){
var vm = this;
vm.titlex = 'AngularJS Tutorial Example';
vm.searcInput ='';
});
答案 0 :(得分:1)
这是使用vm方法的工作解决方案
angular.module('app',[]);
angular.module('app').controller('MainController',function($scope){
vm = this;
vm.titlex = 'AngularJS Tutorial Example';
vm.searchInput ='Initial Demo text'; //corrected variable spelling and added it to vm
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<body ng-app="app" ng-controller="MainController as main">
<div class="container">
<h1>{{main.titlex}}</h1>
<!-- you can directly acceess model as above -->
<div class="input-group-addon">
<span class="glyphicon glyphicon-search"></span>
<input type="text" class="form-control" ng-model="main.searchInput">
</div>
<p>{{main.searchInput}}</p>
</div>
</body>
答案 1 :(得分:0)
用以下代码替换您的控制器代码:
angular.module('app').controller("MainController", function ($scope) {
$scope.titlex = 'AngularJS Tutorial Example';
$scope.searchInput = '';
});
答案 2 :(得分:0)
我还没有改变任何代码,但你的代码看起来工作正常......
//app.js
angular.module('app',[]);
//main.ctrl.js
angular.module('app').controller("MainController",function(){
var vm = this;
vm.titlex = 'AngularJS Tutorial Example';
vm.searcInput ='';
});
&#13;
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>AngularJS Tutorial</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.4/angular.min.js"></script>
<script src="app.js"></script>
<script src="main.ctrl.js"></script>
</head>
<body ng-app="app" ng-controller="MainController as main">
<div class="container">
<h1>{{main.titlex}}</h1>
<div class="input-group-addon">
<span class="glyphicon glyphicon-search"></span>
<input type="text" class="form-control" ng-model="main.searchInput">
</div>
<p>{{main.searchInput}}</p>
</div>
</body>
</html>
&#13;
答案 3 :(得分:0)
请参阅以下更新的代码段 -
angular.module('app',[]);
angular.module('app').controller('MainController',['$scope',function($scope){ //added scope here
$scope.titlex = 'AngularJS Tutorial Example';
$scope.searchInput ='Initial Demo text'; //corrected variable spelling and added it to scope
}]);
<html>
<head lang="en">
<meta charset="UTF-8">
<title>AngularJS Tutorial</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.4/angular.min.js"></script>
<script src="app.js"></script>
<script src="main.ctrl.js"></script>
</head>
<body ng-app="app" ng-controller="MainController as main">
<div class="container">
<h1>{{titlex}}</h1>
<!-- you can directly acceess model as above -->
<div class="input-group-addon">
<span class="glyphicon glyphicon-search"></span>
<input type="text" class="form-control" ng-model="searchInput">
</div>
<p>{{searchInput}}</p>
</div>
</body>
</html>
希望这会有所帮助!!