问题标签 [angularjs-components]
For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.
angularjs - Angular 1.5 单元测试控制器,需要父组件的控制器
我正在尝试对需要父组件和来自另一个模块的控制器的 AngularJS 1.5(带有 Webpack)组件的(子)控制器进行单元测试。
子控制器结构:
子组件:
所以我想做的是模拟出 childController 的 submit() 函数中所需的 parentCtrl。我一直无法找到如何真正做到这一点。我找到了一些类似的子父指令解决方案并尝试了这些解决方案,例如通过假 HTML 元素注入父控制器,如本子父指令示例中所述,并且基本上相同的stackoverflow 解决方案没有结果。我的问题至少不同之处在于子控制器和父控制器位于不同的模块中。而且我认为范围技巧不是 Angular 1.5 风格的?
没有失败的模拟尝试,我的 Jasmine 测试的骨架:
这导致TypeError: Cannot read property 'submitTextSearch' of undefined
. 我应该怎么做才能模拟父控制器?由于我在 Angular 方面的经验有限,我没有想法。
angularjs - 重构后AngularJS temlateUrl在组件中损坏->在WebStorm中移动
我正在使用 WebStorm 进行基于组件的 AngularJS 开发。
由于我们有多个模块用于组装多个应用程序变体,因此我经常使用 WebStorm 的 Refactor -> Move 功能将 Angular 组件及其模板移动到项目结构中的不同文件夹。
每当我这样做时,组件templateUrl
属性中模板的路径都会从
至
我可以以某种方式告诉 WebStorm 使用相同的参考点(基本上是 app 文件夹)进行路径重构吗?这样就变成了
反而?
angularjs - Angular 组件:单向绑定和属性绑定有什么区别?
我一直在构建一些角度组件,想知道单向(“<”)和属性(“@”)绑定之间的实际区别是什么?
是否存在一种比另一种更可取的情况?很简单,属性总是不可变的字符串,必须插值?
angularjs - Angular 1.5 组件树深度嵌入
我正在尝试从顶级祖先组件中找出一种使用嵌入为深层嵌套组件提供模板的方法。这个组件树的想法是可以重用的,但最低级别组件的标记可以根据使用进行定制。我似乎找不到通过多个组件传递内容的方法。
angularjs - 单击时从 DOM 和其父级中删除 AngularJS 组件
我正在尝试在 AngularJS中显示用户列表
每个人都是具有自定义组件元素的用户组件将有两个按钮
第一个必须从 DOM 中删除组件元素(并销毁观察者等),但不要更改用户列表。
第二个必须从列表中删除组件和用户
我一直在搜索并查看用于带有链接元素的指令的方式,但无法弄清楚如何在此处应用。
angularjs - 拖放 Angular 1.x 指令/组件和父范围
假设我的祖父组件/指令的范围变量声明如下:$scope.g = { // methods here };
在我的每个嵌套组件/指令的控制器中,我指的是那个变量$scope.$parent.$parent.g
,然后调用一些函数,g
比如$scope.fromNgClick = function() { $scope.$parent.$parent.g.run(); };
. 这很好用(尽管我想要一种更好的方式来指代祖先,例如别名?而不是 $parent 链)。
当我将一个组件从它的祖父组件本地拖到另一个祖父兄弟组件中时(明白了吗?),它$scope.fromNgClick = function() { $scope.$parent.$parent.g.run(); };
仍然指向原始范围,而不是我需要的新范围。因此,单击相同的 ng-clickable 元素仍会触发run()
前一个祖父母范围内的方法。
这一切都说得通;但是,有没有办法让范围指向新的删除位置祖父母范围?
谢谢!
编辑
标记将类似于以下内容,其中<g-directive>
被视为祖父母,因为它transclude
在其模板上使用,最终包装子指令:
这就是$scope.$parent.$parent.g
on 子指令/组件的原因。
可以将子组件拖放到另一个子组件中,<g-directive>
但它的控制器仍指向其原始祖父(original<g-directive>
的控制器范围变量)。我希望它指向新的祖父母被放入,基本上将它的范围重置为新放置的范围。
javascript - 模板未在组件设计下加载
我正在尝试在使用组件时制作单页应用程序,因为我的公司将来将转向使用组件,并且我正在尝试遵循 angular-phonecat 教程。我遇到的问题是,由于某种原因,在我的 app.config.js 文件中,主页的模板没有被识别(主页部分),我不知道为什么。如果我用一个简单的“你好”字符串替换它,它显示得很好,所以它必须在我的组件中的某个地方,但我无法追查为什么它不能识别它。
相关代码:
app.config.js:
app.module.js:
]);
主页.template.html:
主页.module.js:
主页.component.js:
});
控制器.js:
索引.html:
我的 app.config.js 文件位于根“app”目录中,而我的主文件都位于“/app/home-page”目录中。链接到 angular-phonecat:https ://docs.angularjs.org/tutorial/step_03
angularjs - 对于 AngularJS 应用程序,我应该在哪里放置跨组件/控制器使用的代码?
它应该与应用程序模块相关联吗?它应该是一个组件还是只是一个控制器?基本上,我想要实现的是跨所有页面的通用布局,我可以在其中放置或删除其他组件。
这是我的应用程序的结构大致如下所示:
javascript - 如何在 AngularJS 组件中定义一个新变量
我试图创建一个与进度条相对应的 AngularJS 组件。这是为这个问题创建的 JSFiddle http://jsfiddle.net/Lvc0u55v/6725/
这是我的应用程序和组件定义:
以及以下 HTML 代码:
尽管在组件控制器中定义了width
属性,AngularJS 却无法在定义的模板中找到它。
自从我刚开始学习 AngularJS 以来,我很难有效地调试这段代码。
javascript - 如何在 Angular 1.5 组件中实现 $compile(..)($scope) 服务,其中 $scope 可注入被删除?
我目前正在使用 Angular 1.4,在转换到 Angular 1.5 的过程中,我正在将所有控制器重写为组件样式并删除控制器内的 $scope 可注射剂。在一种情况下,我使用 $compiler 服务在控制器内编译动态生成的 html,以便将 ng-click 属性绑定到控制器范围。我从以下问题中得到了帮助。
现在如何使用 Angular 1.5 实现相同的场景?(我必须摆脱 $scope)