如何将$ scope传递给angularjs 1.5组件/指令

Question

我试图在角1.5中使用新的.component()方法.目前我发现如何使用它的信息很少.棱角分明的文档也没有提到它.

我试图将范围或对象从范围传递到.component以在组件的模板部分中使用,但我可以传递的唯一两个参数是$ element和$ attrs.我试过通过html中的属性传递对象,但我得到的只是对象名称的字符串.

我试过将它设置为以这些方式表示为变量

my-attr="item.myVal"
my-attr="{item.myVal}"
my-attr="{{item.myVal}}"

每次我仍然得到字符串文字,而不是变量的值.如何将其设置为变量？

我尝试通过新绑定捕获数据:{}但我的模板:{}然后无法访问变量.

这是我现在的组件:

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;
    }
};

这是我在HTML中的组件

<panel-item-list-action my-attr="item.myVal"></panel-item-list-action>

这是组件的角度模块声明:angular.module('Panel', []).component('panelItemListAction', ItemListAction)

Answer 1

模板不需要$ scope.模板函数返回HTML.您可以像往常一样在控制器中注入$ scope.

这就是AngularJS博客关于组件的说法:

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: "="
  }
});

要了解有关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