javascript - how to pass $scope to angularjs 1.5 componentdirective - Stack Overflow

admin管理员组

文章数量:1341213

I am trying to use the new ponent() method in angular 1.5. 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 ponent to be used in the template portion of the ponent 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.

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 ponent 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 = pileListAction();
        return listAction;
    }
};

Here is my ponent in HTML

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

This is the angular module declaration for the ponent:angular.module('Panel', [])ponent('panelItemListAction', ItemListAction)

I am trying to use the new .ponent() method in angular 1.5. 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 .ponent to be used in the template portion of the ponent 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.

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 ponent 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 = pileListAction();
        return listAction;
    }
};

Here is my ponent in HTML

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

This is the angular module declaration for the ponent:angular.module('Panel', []).ponent('panelItemListAction', ItemListAction)

• javascript
• angularjs
• angularjs-directive

Share Improve this question Follow edited Jan 12, 2016 at 23:20 appthat asked Jan 12, 2016 at 23:03 appthatappthat 82622 gold badges1212 silver badges3131 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 7

Templates don't need $scope. Template functions return HTML. You can inject $scope in the controller as always.

This is what the AngularJS Blog says about ponents:

module.ponent

We have created a more simplistic way of registering ponent directives. In essence, ponents 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 .ponent() method in AngularJS 1.5, you can create a reusable ponent with very few lines of code:

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

To learn more about the AngularJS 1.5 ponent method please read Todd Motto's article: http://toddmotto./exploring-the-angular-1-5-ponent-method/

-- http://angularjs.blogspot./2015/11/angularjs-15-beta2-and-14-releases.html

本文标签： javascripthow to pass scope to angularjs 15 componentdirectiveStack Overflow