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

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

1 个答案: