[英]how to pass $scope to angularjs 1.5 component/directive
I am trying to use the new .component() method in angular 1.5. 我试图在角度1.5中使用新的.component()方法。 Currently I have found little info on how to use it. 目前我发现如何使用它的信息很少。 The angular docs dont mention it really either. 棱角分明的文档也没有提到它。
I am trying to pass the scope or an object from the scope to the .component to be used in the template portion of the component but the only two parameters I can pass are $element and $attrs. 我试图将范围或对象从范围传递到.component以在组件的模板部分中使用,但我可以传递的唯一两个参数是$ element和$ attrs。 I have tried passing the object through an attribute in the html but all I got was the string of the objects name. 我试过通过html中的属性传递对象,但我得到的只是对象名称的字符串。
I have tried setting it to be represented as a variable in these ways 我试过将它设置为以这些方式表示为变量
my-attr="item.myVal"
my-attr="{item.myVal}"
my-attr="{{item.myVal}}"
each time I still get the string literal and not the value of the variable. 每次我仍然得到字符串文字,而不是变量的值。 How can I set it to be treated as a variable? 如何将其设置为变量?
I have tried capturing the data via the new bindings: {} but my template:{} didnt have access to the variables then. 我尝试通过新绑定捕获数据:{}但我的模板:{}然后无法访问变量。
Here is my component as it is now: 这是我现在的组件:
export var ItemListAction = {
controller: 'PanelCtrl as itemCtrl',
isolate: false,
template: ($element: any, $attrs: any): any=> {
var myVal: any = $attrs.myAttr; // returns "item.myVal"
var listAction: string = compileListAction();
return listAction;
}
};
Here is my component in HTML 这是我在HTML中的组件
<panel-item-list-action my-attr="item.myVal"></panel-item-list-action>
This is the angular module declaration for the component: angular.module('Panel', []).component('panelItemListAction', ItemListAction)
这是组件的角度模块声明: angular.module('Panel', []).component('panelItemListAction', ItemListAction)
Templates don't need $scope. 模板不需要$ scope。 Template functions return HTML. 模板函数返回HTML。 You can inject $scope in the controller as always. 您可以像往常一样在控制器中注入$ scope。
This is what the AngularJS Blog says about components: 这就是AngularJS博客关于组件的说法:
module.component module.component
We have created a more simplistic way of registering component directives. 我们创建了一种更简单的注册组件指令的方法。 In essence, components are special kinds of directives, which are bound to a custom element (something like<my-widget></my-widget>
), with an associated template and some bindings. 本质上,组件是特殊类型的指令,它们绑定到自定义元素(类似于<my-widget></my-widget>
),具有关联的模板和一些绑定。 Now, by using the .component() method in AngularJS 1.5, you can create a reusable component with very few lines of code: 现在,通过在AngularJS 1.5中使用.component()方法,您可以使用非常少的代码行创建可重用的组件:
var myApp = angular.module("MyApplication", [])
myApp.component("my-widget", {
templateUrl: "my-widget.html",
controller: "MyWidgetController",
bindings: {
title: "="
}
});
To learn more about the AngularJS 1.5 component method please read Todd Motto's article: http://toddmotto.com/exploring-the-angular-1-5-component-method/ 要了解有关AngularJS 1.5组件方法的更多信息,请阅读Todd Motto的文章: http : //toddmotto.com/exploring-the-angular-1-5-component-method/
-- http://angularjs.blogspot.com/2015/11/angularjs-15-beta2-and-14-releases.html - http://angularjs.blogspot.com/2015/11/angularjs-15-beta2-and-14-releases.html
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.