javascript - ng-if ejemplos

cómo pasar $ scope a angularjs 1.5 componente/directiva

Question

Estoy tratando de usar el nuevo método .component () en angular 1.5. Actualmente he encontrado poca información sobre cómo usarlo. Los documentos angulares tampoco lo mencionan realmente.

Estoy tratando de pasar el alcance o un objeto del ámbito al componente .com que se utilizará en la parte de la plantilla del componente, pero los dos únicos parámetros que puedo aprobar son $ element y $ attrs. He intentado pasar el objeto a través de un atributo en el html, pero todo lo que obtuve fue la cadena del nombre de los objetos.

He intentado configurarlo para que se represente como una variable de estas maneras

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

cada vez que sigo recibiendo la cadena literal y no el valor de la variable. ¿Cómo puedo configurarlo para ser tratado como una variable?

He intentado capturar los datos a través de los nuevos enlaces: {} pero mi plantilla: {} no tuvo acceso a las variables.

Aquí está mi componente como es ahora:

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

Aquí está mi componente en HTML

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

Esta es la declaración del módulo angular para el componente: angular.module(''Panel'', []).component(''panelItemListAction'', ItemListAction)

Answer 1

Las plantillas no necesitan $ scope. Las funciones de la plantilla devuelven HTML. Puede inyectar $ scope en el controlador como siempre.

Esto es lo que dice el Blog de AngularJS sobre los componentes:

module.component

Hemos creado una forma más simplista de registrar las directivas de los componentes. En esencia, los componentes son tipos especiales de directivas, que están vinculadas a un elemento personalizado (algo así como <my-widget></my-widget> ), con una plantilla asociada y algunas vinculaciones. Ahora, al usar el método .component () en AngularJS 1.5, puede crear un componente reutilizable con muy pocas líneas de código:

var myApp = angular.module("MyApplication", [])
myApp.component("my-widget", {
  templateUrl: "my-widget.html",
  controller: "MyWidgetController",
  bindings: {
    title: "="
  }
});

Para obtener más información sobre el método del componente AngularJS 1.5, lea el artículo de 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