javascript - How to properly use the same AngularJS 1.5 component multiple times in a view? -


i'm creating set of widgets angularjs 1.5's new components. problem is, when using same widget multiple times, somehow share controller or scope. thought 1 of things components scope isolated?

my main html template hold widgets:

<widget-list     title="books"     class="col-xs-12 col-md-4"> </widget-list>  <widget-list     title="movies"     class="col-xs-12 col-md-4"> </widget-list>  <widget-list     title="albums"     class="col-xs-12 col-md-4"> </widget-list>

my widget template:

<div class="widget widget-list">     <div class="panel b-a">          <div class="panel-heading b-b b-light">             <h5>{{$widget.title}}</h5>             <div class="pull-right">                 <button type="button" class="btn btn-default btn-sm" ng-click="$widget.dosomething()">                                     </button>             </div>         </div>          <div class="panel-content">             {{$widget.content || 'no content'}}         </div>      </div> </div>

my widget component:

app.component('widgetlist', {     templateurl: 'template/widget/widget-list.html',     bindings: {         title   : '@',     },     controlleras: '$widget',     controller: function($timeout) {          $widget = this;          console.log('title on init: ', $widget.title)          $timeout(function() {             console.log('title after 3 seconds: ', $widget.title)         }, 3000)          $widget.dosomething = function() {             $widget.content = "something";         }     } });

when running code, console looks like:

title on init: books title on init: movies title on init: albums (3) title after 3 seconds: albums

also after rendering, 3 widgets display no content in template. but, when clicking dosomething() button in either 1 of 3 widgets, content of last widget updates something.

what happening here? why components not 'isolated'?

looks have global variable called $widget here, try this:

var $widget = this;

instead of

$widget = this;

it creates mess since $widget variable holds reference controller has been initialized, in case controller of third component.


Comments

Post a Comment

Popular posts from this blog

iOS: Performance of reloading UIImage(name:...) -

i have tableview , each row has icon. 90% of rows have same icon. in cellforrowatindexpath method load image assets folder this: var cellimage = uiimage(named: "myimage") does pose performance problem? os somehow smart enough it's same image each time? better if loaded image once , saved in class variable , assigned each time? uiimage 's named: api does kind of caching. if @ uiimage's documentation , states: use init(named:in:compatiblewith:) method (or init(named:) method) create image image asset or image file located in app’s main bundle (or other known bundle). because these methods cache image data automatically, recommended images use frequently.
Read more

How to prevent logback from emitting repeated "Empty watch file list. Disabling" messages -

i have logback configured logback.xml located here: http://pastebin.com/kuquekxy . every minute, see log message emitted of form: 18:26:21,486 |-info in reconfigureonchangetask(born:1478715201485) - empty watch file list. disabling why happening , how can rid of these? i can tell why happening, not how rid of them. the reconfigureonchangetask log line when doesn't have files watch. and doesn't have files watch because file in jar, , only watch files on filesystem . makes sense, because files within jar file don't change.
Read more

c# SetCompatibleTextRenderingDefault must be called before the first -

i tried search exception couldn't find solution on case i'am using code below invoke .net application : assembly assem = assembly.load(data); methodinfo method = assem.entrypoint; var o = activator.createinstance(method.declaringtype); method.invoke(o, null); the application invoked has form , in entrypoint of application : [stathread] static void main() { application.enablevisualstyles(); application.setcompatibletextrenderingdefault(false); //exception application.run(new form1()); } setcompatibletextrenderingdefault must called before first iwin32window object created in application. edit : assembly = assembly.load(data); methodinfo method = a.gettype().getmethod("start"); var o = activator.createinstance(method.declaringtype); method.invoke(o, null); you should create new method skips initialization...
Read more