Javascript 如何将 $scope 传递给 angularjs 1.5 组件/指令
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/34755442/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
how to pass $scope to angularjs 1.5 component/directive
提问by appthat
I am trying to use the new .component() method in angular 1.5. Currently I have found little info on how to use it. The angular docs dont mention it really either.
我正在尝试在 angular 1.5 中使用新的 .component() 方法。目前，我几乎没有找到有关如何使用它的信息。角度文档也没有真正提到它。
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. I have tried passing the object through an attribute in the html but all I got was the string of the objects name.
我试图将作用域或对象从作用域传递给要在组件模板部分使用的 .component，但我可以传递的唯一两个参数是 $element 和 $attrs。我曾尝试通过 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)
回答by georgeawg
Templates don't need $scope. Template functions return HTML. You can inject $scope in the controller as always.
模板不需要 $scope。模板函数返回 HTML。您可以像往常一样在控制器中注入 $scope。
This is what the AngularJS Blog says about components:
这是 AngularJS 博客关于组件的描述：
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. Now, by using the .component() method in AngularJS 1.5, you can create a reusable component with very few lines of code:
module.component
我们创建了一种更简单的注册组件指令的方式。本质上，组件是特殊类型的指令，它们绑定到自定义元素（类似<my-widget></my-widget>），具有关联的模板和一些绑定。现在，通过使用 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
