Question

我向AngularJS介绍自己，我发现了一些困难。

我正在尝试构建一个简单的控制器来只更改文本，稍后它将调用一个rest API，但我没有这样做。

这是我的HTML代码：

<html>
<head>
    <title>Index</title>
    <script src="assets/scripts/angular.min.js"></script>
    <script src="assets/scripts/angular-animate.min.js"></script>
    <script src="assets/scripts/angular-route.min.js"></script>
    <link rel="stylesheet" type="text/css" href="assets/css/font-awesome.min.css">
    <link rel="stylesheet" type="text/css" href="assets/css/index.css">
    <script src="app.js"></script>
    <script src="app/controllers/SliderController.js"></script>
    <script src="app/controllers/LoginController.js"></script>
</head>
<body>
    <div id="container">
        <div class="leftside">
            <div class="slideshow" ng-app="sliderApp" ng-controller="SliderController">
                <slider images="images" />
            </div>
        </div>
        <div class="rightside">
            <div ng-app="Authentication" ng-controller="LoginController">
                <form style="padding-top: 150px" ng-submit="login()" role="form">
                    <p><input type="text" class="text-line" name="email" id="email" placeholder="email" /></p>
                    <p><input type="password" name="password" id="password" class="text-line" placeholder="password"></p>
                    <button type="submit" class="btn">LOGIN</button>
                </form>
                You spanned: <span ng-bind-html="myTxt"></span>
                <div>You Wrote: {{myTxt}}</div>
            </div>
        </div>
    </div>
</body>
</html>

这是我的javascript：

var authenticationApp = angular.module('Authentication', []);

authenticationApp.controller("LoginController", function ($scope) {
    $scope.myTxt = "You have not yet clicked submit";
    $scope.login = function () {
        $scope.myTxt = "You clicked submit!";
    }
});

由于某些原因You Spanned:没有显示任何内容，You Wrote:后显示{{myTxt}}。我正在使用AngularJS 1.5.9

Example of what is appearing

Answer 1

你在html中有两个ng-app。在这种情况下，只有第一个将起作用。您可以随时通过将{{1 + 1}}之类的内容放入html来测试您的应用是否正常工作。您也可以通过angular.bootstrap手动引导您的应用程序。

Angular JS - 简单文本更改不起作用

1 个答案: