Angular auto trigger specific directive in ng-repeat


You could pass the $index (exists automatically in the ng-repeat scope) - variable into the directive and cause it to broadcast an event unique for ($index + 1) which is the $index for the next instance.

The event could be broadcasted from the $rootScope or a closer scope that's above the repeat. Then you could capture the event in there.

Probably not the best way to do it. I can try to elaborate if anything is unclear.

EDIT

So I played around alittle and came up with this: http://plnkr.co/edit/ChRCyF7yQcN580umVfX1?p=preview Rather

Rather than using events or services I went with using a directive controller to act as the parent over all the line directives inside it:

.directive('lineHandler', function () {
    return {
        controller: function () {
            this.lines = [];
        }
    }
 })

Then requiring 'lineHandler' controller inside the 'line' directive - the controller being a singleton (same instance injected into all the line directives) - you can then setup that controller to handle communication between your directives.

I commented most of my code in the updated plnkr and setup an example of what I think you requested when clicking in one list - affecting the one beneath.

I hope this helps and if anything is unclear I will try to elaborate.



trying to use angular-ui-bootstrap radiobutton directive with ng-repeat in an angular project

Try this:

<button type="button" class="btn" data-ng-repeat="(key,
value) in items" ng-model="radioModel" btn-radio="key">{{key}}
({{value.length}})</button>

Notice btn-radio="key", just drop {{}} and ''


angular.js directive: howto call jquery library for ng-repeat item (with item specific attribute)

Ok I see 2 mistakes here

1. $("#countdown" + scope.item_id).coconut();

you never user jquery inside of a directive. you have to do it the angular way $() in angular you writte it angular.element()

2.

in your link function you dont need to go for an id, since the element parameter is acctually your $("#countdown" + scope.item_id)

so try with angular.element(element)

since you are using isolated scope this should work


Angular directive with ng-repeat and transclude

here http://plnkr.co/edit/61PzGPnqB79nhO5tDr7S?p=preview:

remove template:

//template: "<table><tr ng-repeat='item in
testValues'><td ng-transclude
></td></tr></table>",

add for loop, and a property that refers for the index:

    scope.testValues = [{
        name: "Max",
        car: "vw"
    }, {
        name: "Mike",
        car: "bmw"
    }]

    angular.forEach(scope.testValues,function(v,k){
      var newscope = scope.$new();
      newscope.aTableIndex = k;
      transclude(newscope,function(clone){
        element.append(clone);
      })
    })

the html:

    <div class="abc">{{ testValues[aTableIndex].name
}}</div>

....

    <a-Column>{{ testValues[aTableIndex].car
}}</a-Column>

Updated

removed inject $compile (not needed), as suggested by Christoph


Repeat Angular Directive

$index is not available to your directive code. It is defined in an inner scope only.

I think you should create a child directive and pass required data to it, like $index.

<div class="box quarter" ng-repeat="nodes in
collectordata">
    <div collectordata-child="{{$index}}"
class="label">{{nodes.Label}} <span>(<a
href="#_">History</a>)</span></div>
    <div class="chart" id="{{'barchart' + $index}}"></div>
   
</div>

collectordata-child.link could then access repeat index.

UPDATE

.directive('myPane', function() {
  return {
    require: '^collectordata',
    restrict: 'A',
    scope: {
      index: '='
    },
    link: function(scope, element, attrs, collectordataCtrl) {
      collectordataCtrl...;
    }
  };

Angular auto trigger specific directive in ng-repeat

You could pass the $index (exists automatically in the ng-repeat scope) - variable into the directive and cause it to broadcast an event unique for ($index + 1) which is the $index for the next instance.

The event could be broadcasted from the $rootScope or a closer scope that's above the repeat. Then you could capture the event in there.

Probably not the best way to do it. I can try to elaborate if anything is unclear.

EDIT

So I played around alittle and came up with this: http://plnkr.co/edit/ChRCyF7yQcN580umVfX1?p=preview Rather

Rather than using events or services I went with using a directive controller to act as the parent over all the line directives inside it:

.directive('lineHandler', function () {
    return {
        controller: function () {
            this.lines = [];
        }
    }
 })

Then requiring 'lineHandler' controller inside the 'line' directive - the controller being a singleton (same instance injected into all the line directives) - you can then setup that controller to handle communication between your directives.

I commented most of my code in the updated plnkr and setup an example of what I think you requested when clicking in one list - affecting the one beneath.

I hope this helps and if anything is unclear I will try to elaborate.



- Technology - Languages
+ Webmasters
+ Development
+ Development Tools
+ Internet
+ Mobile Programming
+ Linux
+ Unix
+ Apple
+ Ubuntu
+ Mobile & Tablets
+ Databases
+ Android
+ Network & Servers
+ Operating Systems
+ Coding
+ Design Software
+ Web Development
+ Game Development
+ Access
+ Excel
+ Web Design
+ Web Hosting
+ Web Site Reviews
+ Domain Name
+ Information Security
+ Software
+ Computers
+ Electronics
+ Hardware
+ Windows
+ PHP
+ ASP/ASP.Net
+ C/C++/C#
+ VB/VB.Net
+ JAVA
+ Javascript
+ Programming
Privacy Policy - Copyrights Notice - Feedback - Report Violation 2018 © BigHow