AngularJS 绑定问题

Posted

技术标签:

【中文标题】AngularJS 绑定问题【英文标题】:AngularJS binding issue 【发布时间】: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>

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

【问题讨论】:

【参考方案1】:

我在您的组件中没有看到templateUrltemplate 定义,这是必需的。

您可以添加此template:"&lt;span&gt;Name: vm.user&lt;/span&gt;" 或链接一个 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 好地方,但这不是实际问题。我编辑了我的帖子以删除大写组件名称。谢谢。

以上是关于AngularJS 绑定问题的主要内容,如果未能解决你的问题,请参考以下文章

AngularJS 绑定问题

AngularJS:绑定到服务属性的正确方法

AngularJS 模型绑定在从

AngularJS参数绑定 --AngularJS

AngularJS 1.5 绑定和编译 html 到模态

AngularJs 1.5 - 基于组件的架构、绑定和良好实践