AngularJS組件在淘汰模板中不起作用

Question

我正在嘗試從敲除模板啟動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 -->

我需要從敲除范圍到角度范圍獲取數據。 但是無論何時，我的角度分量都不會觸發。 有任何想法嗎？

Answer 1

首先，這似乎是一個非常糟糕的主意。 如果它是現有的剔除應用程序，為什么要嘗試添加角度？ 敲除還具有組件，因此您可以只使用敲除組件。 否則，我確定angularjs和knockoutjs會互相碰撞。

無論如何。 它似乎適用於可見綁定，但不適用於if綁定。 這是小矮人。 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;
  }
})();

AngularJS組件在淘汰模板中不起作用

問題描述

1 個解決方案

解決方案1
1 2017-10-30 01:51:38

AngularJS組件在淘汰模板中不起作用

問題描述

1 個解決方案

解決方案1 1 2017-10-30 01:51:38

解決方案1
1 2017-10-30 01:51:38