Angularjs组件在knockoutjs模板中不起作用答案

【问题标题】：Angularjs component not working in knockoutjs templateAngularjs组件在knockoutjs模板中不起作用
【发布时间】：2018-04-07 09:26:25
【问题描述】：

我正在尝试从淘汰模板启动 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 -->

我需要将数据从淘汰范围获取到角度范围。但是每当我这样做时，我的角度分量都不会被触发。有什么想法吗？

【问题讨论】：

"我正在尝试从淘汰模板启动 AngularJS 组件" 为什么？
我的 Angular 应用程序是在现有的 Knockout 应用程序之上构建的。由于时间限制，我们已将两者配置为一起工作
@VarunG 我不得不说，这听起来并不省时。
这实际上是一个非常糟糕的主意，但是如果您想从 KnockoutJS 应用程序运行 Angular 组件...您需要引导 Angular 应用程序 ngApp 或 angular.bootstrap 然后包含HTML 中的组件。然后，角度编译器应该适当地解释角度分量。我不知道 Knockout 会做什么，但它可能会起作用。
你们完全正确。这也是性能过载。不幸的是，我没有任何发言权。

标签： javascript angularjs knockout.js components

【解决方案1】：

首先，这似乎是一个非常糟糕的主意。如果它是现有的淘汰赛应用程序，您为什么要尝试添加角度？淘汰赛也有组件，所以你可以只使用淘汰赛组件。否则我敢肯定 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;
  }
})();

【讨论】：

我完全明白你想说什么。但我对此没有任何发言权。关于这个答案，概率是在 Knockout 中开发的一个特殊功能。之后，要开发一个新的父功能，该应用程序是一个AngularJS应用程序，并且在其中敲除，我只想重用现有组件