Sukhmeet Singh Sukhmeet Singh - 7 months ago 13
Javascript Question

Communication between Controller and Directive in angularjs

I am trying to create a small app using AngularJS which consists of users and issues posted by the users respectively.

I am trying to show issues when a particular user is clicked.

I have created the following code so far:

index.html



<div class="container" ng-controller="issueContainer as issueTrack">

<div class="leftContainer" ng-controller="issueForm as issueformCtrl">
<issue-form></issue-form>

<user-issues ng-repeat="issue in user.issues"></user-issues>
</div>

<div class="rightContainer" ng-controller="userForm as userformCtrl">

<form name="userform" ng-submit="userform.$valid && userformCtrl.addUsers()">
<div class="form-group">
<label for="addUser">Username</label>
<input type="text" id="addUser" ng-model="userformCtrl.name" class="form-control" placeholder="Username">
</div>
<div class="form-group">
<input type="submit" class="btn btn-primary" value="Submit" />
</div>
</form>

<h3 class="usersTitle">Users</h3>

<div class="users" ng-show="issueTrack.users.length">
<div ng-repeat="user in issueTrack.users track by $index" value="{{user.username}}" ng-click="userformCtrl.userclickCtrl(user.username)">
{{user.username}}
</div>
</div>
</div>
</div>




app.js

(function(){

var app = angular.module("Issuetracker",[]);

var users=[];

if (localStorage.getItem('users')!==null){

users = JSON.parse(localStorage.getItem("users"));
console.log(users);
}

app.controller("issueContainer", function(){

var issuetrack = this;
this.users = users;

});

app.controller("userForm", function(){

this.addUsers = function(){

users.push({'username':this.name, 'issues':[]});
this.name='';
console.log(users);
localStorage.setItem("users", JSON.stringify(users));
};

this.userclickCtrl= function(data){

var allUsers = JSON.parse(localStorage.getItem("users"));

for(var i=0;i< allUsers.length;i++){

if(allUsers[i].username == data){

var userData = allUsers[i];
break;
}
}
};
});

app.controller("issueForm", function(){

this.issue={};
this.addIssues = function(){

console.log(this.issue);
var allUsers = JSON.parse(localStorage.getItem("users"));

for(var i=0;i< allUsers.length;i++){

if(allUsers[i].username == this.issue.User){

allUsers[i].issues.push(this.issue);
break;
}
}

this.issue={};

localStorage.setItem("users", JSON.stringify(allUsers));
};
});

app.directive("userIssues", function(){

return{

restrict: 'E',
templateUrl: 'userissues.html'
}
});

app.directive("issueForm", function(){

return{

restrict: 'E',
templateUrl: 'issueform.html'
}
});

})()


userissues.html

<div class="issues">
<div ng-repeat="issue in user.issues">
<h3>{{issue.Summary}}<span class="label label-primary" style="margin-left:2%">{{issue.Type}}</span></h3>
<p>{{issue.Description}}</p>
</div>
</div>


Whenever any user is clicked, userclickCtrl function is called where i am getting the user object from
localStrorage
and want to pass it to the userissues directive for the template.

Any leads would be appreciated!!!

Answer

Don't know if I got your problem but maybe this is a possible solution.

You can pass the issue as argument to your directive in this way:

app.directive("userIssues", function(){

return{

    restrict: 'E',
    scope: { issue: '=' },
    templateUrl: 'userissues.html'

}
});

and you can use it like this:

<user-issues ng-repeat="issue in issues" issue="issue"></user-issues>

Try this fiddle for an example

Hope this is what you need

Comments