卷曲括号没有显示角度值

时间:2016-12-30 06:48:38

标签: angularjs curly-braces ng-controller

以下代码未在<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>

4 个答案:

答案 0 :(得分:1)

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

 <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"
};
});

答案 1 :(得分:0)

在您的代码中没有创建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>

答案 2 :(得分:-1)

你应该这样写

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

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

答案 3 :(得分:-2)

<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函数