首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
社区首页 >问答首页 >Angularjs组件在knockoutjs模板中不起作用

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

Stack Overflow用户
提问于 2017-10-26 05:57:20
回答 1查看 122关注 0票数 0

我正在尝试从knockout模板启动一个AngularJS组件。在html中类似于下面的内容。

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
<!-- ko if:something -->
    <my-angular-component attr1= "text1">
      <span data-bind="text: text1"></span> & <span data-bind="text: text2"></span>
    </my-angular-component>
<!--/ko -->

我需要把数据从淘空作用域转移到角度作用域。但是每当我这样做的时候,我的角度组件都不会被触发。有什么想法吗?

EN

回答 1

Stack Overflow用户

发布于 2017-10-30 01:51:38

首先,这似乎是一个非常糟糕的想法。如果它是一个现有的淘汰型应用程序,为什么你要尝试添加angular?knockout也有组件,所以您可以只使用knockout组件。否则,我确信angularjs和knockoutjs将会相互碰撞。

不管怎么说。它似乎适用于可见绑定,但不适用于if绑定。这是plunkr。https://plnkr.co/edit/AvWH2JEF2DEUIWkYBQNy?p=preview

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
<!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>

和角度分量。

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
(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;
  }
})();
票数 1
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/46946819

复制
相关文章
KnockoutJS语法
  假设我们的页面输入区域有一个div用来展示一件物品的名字,同时有一个输入框用来编辑这件物品的名字
javascript.shop
2019/09/04
2.3K0
KnockoutJS语法
为什么 strace 在 Docker 中不起作用?
在编辑“容器如何工作”爱好者杂志的能力页面时,我想试着解释一下为什么 strace 在 Docker 容器中无法工作。
用户8639654
2021/09/18
6.4K0
在AngularJS应用中实现认证授权
在AngularJS应用中实现认证授权 在每一个严肃的应用中,认证和授权都是非常重要的一个部分。单页应用也不例外。应用并不会将所有的数据和功能都 暴露给所有的用户。用户需要通过认证和授权来查看应用的某个特定部分,或者在应用中进行特定的行为。为了在应用中对用户进行识别,我们需要让用户进行登录。 在用户管理方面,传统的服务器端应用和单页应用的实现方式有所不同,单页应用能够和服务器通信的方式只有AJAX。对于登录和退出来说也是如此。 负责识别用户的服务器端需要暴露出一个认证断电。单页应用将会把用户输入的信息发
庞小明
2018/03/07
2.1K0
在AngularJS应用中实现认证授权
在bootstrap中col-md-offset-* 偏移不起作用
在bootstrap中,使用col-md-offset-1、col-md-offset-2、col-md-offset-3、col-md-offset-4等来设置偏移量很常见,但最近就遇到一个问题了,在最新版的bootstrap4.5中,这个值不起作用了。
kirin
2020/10/27
12.6K1
一些前端框架的比较(上)——GWT、AngularJS 和 Backbone.js
和一些前端框架打过交道,想起来这也是技术选型中经常面对的内容。我把我的经验、思考、感受,甚至是吐槽,记录在这里,有些零散,并且更多的是个人的感悟。而且由于技术所限,可能部分内容不够深入,或者不甚客观。当然,网上有很多分析对比,视角可能更为全面和系统。如果你在技术选型,或者在考虑要学习使用哪一款 MVC/MVP/MVVM 框架的时候,此文能够给你有价值的信息,就更棒了。如果你觉得我哪些部分说得不正确,或者需要补充,也烦请告知。
四火
2022/07/19
1.9K0
一些前端框架的比较(上)——GWT、AngularJS 和 Backbone.js
AngularJS在自动化测试中的应用
1、AngularJS是一组用来开发web页面的框架、模板以及数据绑定和丰富UI的组件;
宜信技术学院
2019/06/28
1.9K0
AngularJS的模板和数据绑定详解
Angular应用中的模板只是一些HTML片段而已,我们可以从服务器上加载,或者在标签中定义,处理方式与所有其他静态资源相同。如果你需要UI组件,你可以在模板中进行定义,使用标准的HTML加上Angular指令即可。模板一旦加载到浏览器之后,Angular将会把它和数据整合起来,然后再把这些模板展开到整个应用中。当我们显示购物车中的物品时,我们已经看到过这种例子: 这里,对于items数组中的每一个元素,Angular将会给外层 生成一份拷贝,包括其中的所有内容。那么,这里的数据是从哪儿来的呢?在购物车
企鹅号小编
2018/01/10
1.2K0
AngularJS的模板和数据绑定详解
List.append() 在 Python 中不起作用,该怎么解决?
Python 是一种强大而灵活的编程语言,它提供了许多方便的数据结构和操作方法,其中之一就是列表(List)。列表是一个有序的集合,可以包含不同类型的元素,并且可以进行添加、删除和修改等操作。在 Python 中,我们通常使用 List.append() 方法向列表末尾添加元素。然而,在某些情况下,你可能会遇到 List.append() 方法不起作用的问题。本文将详细讨论这个问题并提供解决方法。
网络技术联盟站
2023/06/01
2.7K0
程序员Web面试之前端框架等知识
基于前面2篇博客: 程序员Web面试之jQuery 程序员Web面试之JSON 您已经可以顺利进入Web开发的大门。 但是要动手干,还需要了解一些已有的前端框架、UI套件,即要站在巨人肩膀上而不是从轮
葡萄城控件
2018/01/10
2.2K0
程序员Web面试之前端框架等知识
基于Webpack, KnockoutJs,esyui,koeasyui实现类vue-cli生成的模板框架
      前后端分离的开发机制,基本上是开发现代业务系统的标配。可在国内某些特殊领域还是存在大量的以JQuery走天涯的现象,但其中也不泛有追求技术者,如不才的鄙人。不才的本人曾以JQuery走天涯;后又接受了Knockoutjs,被他MVVM思想所吸引;也学习和了解过vue,他确实很棒,很了不起,但他不兼容ie8-(基于他的几款UI框架对低本的IE支持都不友好)。所以我产生了Knokcoutjs + easyui + webpack = ?的想法。有了想法就要开撸,终于在今年5月份完成了koeasyui
sam dragon
2018/11/08
1.1K0
KnockoutJS的基础用法
如今,各种前端框架应接不暇,令人眼花缭乱,有时不得不感叹作为程序猿也真是苦逼,总有学不完的技术,何时是尽头,除非你转化!苦海无边,回头是不是岸,由你决定!
javascript.shop
2019/09/04
5.6K0
KnockoutJS的基础用法
在 Vue 中,父组件中传递数据给子组件
在父组件中传递数据给子组件。在 Vue 中,可以通过 props 属性来实现父组件向子组件传递数据的功能。
王小婷
2023/09/11
3010
angularjs子组件向父组件传值_react子组件传值
版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。
全栈程序员站长
2022/10/03
1.9K0
在 GNOME 中创建文档模板
我只是偶然发现了 GNOME 的一个新功能(对我来说是的):创建文档模版。 模版(template)也被称作 样版文件(boilerplate),一般是有着特定格式的空文档,例如律师事务所的信笺,在其顶部有着律所的名称和地址;另一个例子是银行以及保险公司的保函,在其底部页脚包含着某些免责声明。由于这类信息很少改变,你可以把它们添加到空文档中作为模板使用。
用户8870853
2021/09/13
4.2K0
(五)在组件中访问状态
一、在组件中访问状态 store.js import { ref, computed } from 'vue' import { defineStore } from 'pinia' export const useNoteStore = defineStore('note', () => { const noteList = ref([ { // ... } ]) return { noteList
老怪兽
2023/02/22
1.7K0
【AngularJS】 # AngularJS入门
ng-app 指令定义一个 AngularJS 应用程序。 若不声明,将直接显示表达式。
全栈程序员站长
2022/09/15
23.2K0
【AngularJS】 # AngularJS入门
AngularJS 中的 controllerAs
Controller 在 AngularJS 应用中可以说是无处不在, 可以在 html 中通过 ngController 指令来指定 Controller , 语法为:
beginor
2020/08/10
8890
在 Angular 应用中创建包含组件
包含组件就是指可以包含其它组件的组件, 以 Bootstrap 的卡片 (Card) 为例, 它包含页眉 (header) 、 主体 (body) 和 页脚 (footer) , 如下图所示:
beginor
2020/08/07
4.8K0
在 Angular 应用中创建包含组件
Magento 2中文手册之常见概念解析
magento2自带索引机制,例如catalog是一个EAV结构,所以catalog的数据很分散,查询效率比较低,系统每次reindex都会把catalog数据通过indexer机制转移到一个简单表(带有flat的表)上,这样查询效率就得到优化。大多数情况下不需要了解这个概念,系统会自动完成,但如果你通过setup添加EAV attibute或者field,你就必须在indexer.xml声明它。
ytkah
2022/03/14
2.3K0
Lua组件在Redis中的作用
这种功能允许用户在Redis服务器上执行原子性的操作,从而避免了多次网络往返的开销。
一凡sir
2023/10/03
2780
Lua组件在Redis中的作用

相似问题

knockoutJS中的组件还是模板?

14

KnockoutJS组件;模板没有呈现

12

KnockoutJS:在applyBindings之后注入模板(组件)

20

knockoutjs模板绑定不起作用

32

像KnockoutJS这样的AngularJS中的HTML模板

13
添加站长 进交流群

领取专属 10元无门槛券

AI混元助手 在线答疑

扫码加入开发者社群
关注 腾讯云开发者公众号

洞察 腾讯核心技术

剖析业界实践案例

扫码关注腾讯云开发者公众号
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档
查看详情【社区公告】 技术创作特训营有奖征文