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】:我在您的组件中没有看到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 好地方,但这不是实际问题。我编辑了我的帖子以删除大写组件名称。谢谢。以上是关于AngularJS 绑定问题的主要内容,如果未能解决你的问题,请参考以下文章