Angularjs组件在knockoutjs模板中不起作用
Angularjs组件在knockoutjs模板中不起作用
提问于 2017-10-26 05:57:20
我正在尝试从knockout模板启动一个AngularJS组件。在html中类似于下面的内容。
<!-- ko if:something -->
<my-angular-component attr1= "text1">
<span data-bind="text: text1"></span> & <span data-bind="text: text2"></span>
</my-angular-component>
<!--/ko -->我需要把数据从淘空作用域转移到角度作用域。但是每当我这样做的时候，我的角度组件都不会被触发。有什么想法吗？
回答 1
Stack Overflow用户
发布于 2017-10-30 01:51:38
首先，这似乎是一个非常糟糕的想法。如果它是一个现有的淘汰型应用程序，为什么你要尝试添加angular？knockout也有组件，所以您可以只使用knockout组件。否则，我确信angularjs和knockoutjs将会相互碰撞。
不管怎么说。它似乎适用于可见绑定，但不适用于if绑定。这是plunkr。https://plnkr.co/edit/AvWH2JEF2DEUIWkYBQNy?p=preview
<!DOCTYPE html>
<html lang="en" ng-app="myApp" class="no-js">
<head>
<title>My AngularJS App</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
</head>
<body>
<p>show component: <input type="checkbox" data-bind="checked: something" /></p>
<div ng-app="myApp">
<div data-bind="visible: something">
<hello-world name="world"> </hello-world>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://code.angularjs.org/1.5.5/angular.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>
<script src="script.js"></script>
<script>
function viewModel() {
var self = this;
this.something = ko.observable(true);
}
var vm = new viewModel();
(function($) {
ko.applyBindings(vm); //bind the knockout model
})(jQuery);
</script>
</body>
</html>和角度分量。
(function(){
angular.module("myApp", [])
.component("helloWorld",{
template: "Hello {{vm.name}}!",
bindings: { name: '@' },
controller: ('helloWorldController',helloWorldController),
controllerAs: 'vm'
})
function helloWorldController(){
/* jshint validthis: true */
var vm = this;
}
})();页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/46946819
复制相关文章
相似问题
knockoutJS中的组件还是模板？
KnockoutJS组件；模板没有呈现
KnockoutJS:在applyBindings之后注入模板(组件)
knockoutjs模板绑定不起作用
像KnockoutJS这样的AngularJS中的HTML模板
添加站长 进交流群
领取专属 10元无门槛券
AI混元助手 在线答疑
关注 腾讯云开发者公众号
洞察 腾讯核心技术
剖析业界实践案例
腾讯云开发者
