Question

我有这些代码示例，我目前正在尝试学习它之前运行良好的角度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 ='';
});

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

Answer 2

用以下代码替换您的控制器代码：

angular.module('app').controller("MainController", function ($scope) {
    $scope.titlex = 'AngularJS Tutorial Example';
    $scope.searchInput = '';
});

Answer 3

我还没有改变任何代码，但你的代码看起来工作正常......

＆＃13;

//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;

Answer 4

请参阅以下更新的代码段 -

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>

希望这会有所帮助!!

为什么角j在这里不起作用

4 个答案: