javascript - 使用 angularJS .component() 但没有得到任何值

标签 javascript html angularjs

我是 angularJS 的新手,并试图让以下简单的示例发挥作用。但是当我运行它时,我得到的是空白屏幕而不是“Hello world”。非常感谢您的帮助。谢谢。

Angular -comp.js:

  angular.module('myApp').component('greetUser', {
      template: 'Hello, {{$ctrl.user}}!',
      controller: function GreetUserController() {
          this.user = 'world';
      }
 });

index.html:

<!DOCTYPE html>
<html ng-app="myApp">
<head>
    <meta charset="ISO-8859-1">
    <title>AngularJS</title>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js">             </script>
    <script src="js/angularcomp.js"></script>
</head>
<body>
    <greet-user></greet-user>
</body>
 </html>

更新:我发现问题了,1.4.5版本不支持组件。我现在使用 1.6.1 并且它可以工作!!!!!

最佳答案

问题就出在这里

angular.module('myApp')

这应该在哪里

angular.module('myApp',[])

因为您正在创建一个新模块。如果您不传递第二个数组参数,AngularJS 将尝试查找您的模块,而不是创建一个新模块。

试试这个:

<!DOCTYPE html>
<html>

  <head>
    <meta charset="ISO-8859-1">
    <title>AngularJS</title>
  </head>

  <body ng-app="myApp">
    <greet-user></greet-user>
  </body>

  <script>
    angular.module('myApp',[])
      .component('greetUser', {
        template: 'Hello, {{$ctrl.user}}!',
        controller: function GreetUserController() {
          this.user = 'world';
        }
      });

  </script>

</html>

关于javascript - 使用 angularJS .component() 但没有得到任何值,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/42147583/

相关文章:

javascript - webpack-dev-server Electron Angular 1.6.1 热重载黑屏

javascript - 输入中的 ngBlur 与该输入框中搜索的列表项之间的问​​题

javascript - 使用 jquery 一次随机淡出 9 个缩略图的图库

javascript - 无法让 $.ajax.mostRecentCall 与 jasmine 2.0.2 一起使用

javascript - 为 2D WebGL 矢量化三次贝塞尔曲线

javascript - JSON/JavaScript 获取对象键

javascript - 是否可以解释放置在 html 标签内的 javascript 代码?

html - Internet Explorer 特定的 html 无序列表错误

php - 替换 javascript include 中的 html 文本

angularjs - Angular JS : $exceptionHandler without try or throw block?