花括号不显示角度值答案

【问题标题】：Curly braces not showing value in angular花括号不显示角度值
【发布时间】：2016-12-30 06:48:37
【问题描述】：

以下代码未显示或更新 <p> 标记中的 nam 值。请帮忙！

<html ng-app>
<head></head>
<body>
<input ng-model = "nam.a" ng-controller = "myControl">
<p> Hello {{nam.a}}  </p>
<script>
function myControl($scope){
$scope.nam =  {
    a : "abcdefg"
};
};
</script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.25/angular.min.js"></script>
</body>
</html>

【问题讨论】：

你确定这是有角度的吗？

标签： angularjs curly-braces ng-controller

【解决方案1】：

您应该在 html 页面中指定应用模块。

 <html ng-app="Test">

<body  ng-controller = "myControl">
<input ng-model = "nam.a"/>
<p> Hello {{nam.a}}  </p>

然后像下面这样注入模块和控制器。

var app = angular.module('Test', []);
app.controller('myControl', function($scope) {
      $scope.nam =  {
    a : "abcdefg"
};
});

【讨论】：

【解决方案2】：

在您的代码中没有创建 ng-app，ng-controller 也以错误的方式绑定。这是正确的实现。看例子。

<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>

<body>

    <div ng-app="myApp" ng-controller="myControl">

        <input ng-model="nam.a" >
        <p> Hello {{nam.a}} </p>
    </div>

    <script>
        var app = angular.module('myApp', []);
        app.controller('myControl', function ($scope) {
            $scope.nam = {
                a: "abcdefg"
            };
        });
    </script>

</body>

</html>

【讨论】：

是的，行得通。我的 ng-controller 实现有什么问题？
您的角度控制器声明错误。看这里的例子。w3schools.com/angular/angular_controllers.asp

【解决方案3】：

你应该这样写

        <body ng-controller="myControl">
            <input ng-model = "nam.a">
            <p> Hello {{nam.a}}  </p>
         </body>

https://plnkr.co/edit/M5n5Zb3v3J9W9Mx65cub?p=preview

【讨论】：

你应该在你的实际代码开始之前声明你的 ng-controller，就像我在正文中声明的那样......它的工作知道......为什么要投票呢？？

【解决方案4】：

<html>
<body ng-app="yourAppName">
  
  <div  ng-controller="myControl">
    <input ng-model="nam.a">
    <p> Hello {{nam.a}}  </p>
  </div>
  
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.25/angular.min.js"></script>

  <script>
    angular.module('yourAppName', [])
      .controller('myControl', function($scope) {
        $scope.nam = {
          a: 'abcdefg'
        }
      });
  </script>
</body>
</html>

使用angular 创建一个模块（在示例中，我称之为yourAppName），您可以在ng-app 指令的HTML 中引用该模块
将ng-controller 指令移动到父元素，以便在您引用$scope 的任何地方
使用 angular.module(...).controller() 创建控制器，而不是仅仅创建随机的 JavaScript 函数

【讨论】：