AngularJS 绑定问题答案

【问题标题】：AngularJS binding issueAngularJS 绑定问题
【发布时间】：2019-01-26 15:03:06
【问题描述】：

我正在使用组件而不是原始控制器将大型 AngularJS 1.4 应用程序升级到 1.5。

我有一个如下所示的基本组件：

 'use strict';

 angular.module('myModule').component('userComponent', {
 controllerAs: 'vm',
 bindings: {
    user: '<'
 },
 controller:
    function userComponent($http) {
      let vm = this;
      vm.user = "World";
 });

当我尝试在模板中显示 vm.user 的值时，它没有显示并且控制台中没有错误：

 <user-component>
    <h1>Hello {{vm.user}}</h1>
 </user-component>

你能告诉我有什么问题吗？这应该相当简单，我不确定为什么它没有按预期进行绑定。

【问题讨论】：

标签： javascript angularjs binding components

【解决方案1】：

我在您的组件中没有看到templateUrl 或template 定义，这是必需的。

您可以添加此template:"<span>Name: {{vm.user}}</span>" 或链接一个 html 页面。 You can read more in the documentation here

(function(angular) {
  'use strict';
  angular.module('test', []).controller('MainCtrl', function MainCtrl() {});


  angular.module('test').component('userComponent', {
    controllerAs: 'vm',
    bindings: {
      user: '<'
    },
    controller: function UserComponent($http) {
      let vm = this;
      vm.user = "World";
    },
    template: "<span>Name: {{vm.user}}</span>"
  });
})(window.angular);

<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.10/angular.min.js"></script>

<body ng-app="test">
  <!-- components match only elements -->
  <div ng-controller="MainCtrl as ctrl">
    <user-component></user-component>
  </div>
</body>

【讨论】：

我的 route.js 文件中确实有 templateUrl，如下所示： .state('operatorHome', { url: '/user', component: 'UserComponent', views: { '': { templateUrl : 'templates/user/user.html' } }, })
我想在我的组件中添加 templateUrl，但这会产生 404 not found 错误。
正如 George 向您展示的那样，您可以使用 template 并直接在您的组件中写入 HTML 模板
@Zooly 模板会很大，我不太习惯这样做。
@NizarB。查看ui-routers documentation（这是我假设您正在使用的）必须在组件上定义模板/模板Url，尽管您已经提到移动它会导致404，您是否可以不只是更新它以获得正确的相对网址？不知道您的项目文件夹结构，我无法回答您需要将其更改为什么

【解决方案2】：

你不能像那样填充组件模板。您必须定义一个链接到您的组件的模板。

 'use strict';

 angular.module('myModule').component('userComponent', {
 controllerAs: 'vm',
 template: '<h1>Hello {{vm.user}}</h1>',
 bindings: {
    user: '<'
 },
 controller:
    function UserComponent($http) {
      let vm = this;
      vm.user = "World";
 });

【讨论】：

组件名称不应该以小写字母开头：'userComponent'?
@AlekseySolovey 是的，他们应该，我忘了在我的回答中提到这一点，而且控制器定义后缺少一个花括号
@AlekseySolovey 好地方，但这不是实际问题。我编辑了我的帖子以删除大写组件名称。谢谢。