Develop Reference

ANGULARJS: directive inside another directive doesn't have access to ng-model from HTML

I recently had a coding challenge that I got rejected for because it was garbage. Didn't have a lot of time so I threw everything together in one giant HTML file/angular controller, so I'm in the middle of rewriting it in templates to try to make it more reusable. So far it's going well, but I'm having some trouble with an html template not being able to access ng-model. Whenever I console.log the ng-model, I get undefined.
Here's the top layer HTML:
<div class="col-md-8 box">
<div class="panel panel-default">
<div class="panel-heading">Companies</div>
<div class="panel-body">
<div ng-repeat="company in companies">
<div class="panel panel-default">
<div class="panel-heading">Name: {{company.name}} <button ng-click="companies[$index].editCompany = !companies[$index].editCompany" class="pull-right">EDIT COMPANY</button></div>
<div class="panel-body" ng-if="!companies[$index].editCompany">
<p>Address: {{company.address}}</p>
<p>Revenue: {{company.revenue}}</p>
<p>Phone Number: {{company.phone}}</p>
<button ng-click="getPeople(companies[$index]._id, $index); companies[$index].viewEmployees = !companies[$index].viewEmployees">People Who Work Here</button>
<div ng-if="companies[$index].viewEmployees">
<show-employees-list></show-employees-list>
</div>
</div>
</div>
<div ng-if="companies[$index].editCompany">
<edit-company-directive></edit-company-directive>
</div>
</div>
</div>
</div>
</div>
And here's the HTML for the directive:
<div class="employee-box" ng-repeat="employee in companies[$index].employees">
<span class="glyphicon glyphicon-edit pull-right" ng-click="companies[$index].editEmployee = !companies[$index].editEmployee; clickEdit()"></span>
<span class="glyphicon glyphicon-remove pull-right" ng-click="deletePerson(employee._id, $index, companies[$parent.$index].employees)"></span>
<div ng-if="!companies[$index].editEmployee">
<div>
<p><b>Name:</b> {{employee.name}}</p>
<p><b>Email:</b> {{employee.email}}</p>
</div>
</div>
<div ng-if="companies[$index].editEmployee" class="form-body">
<form name="editPersonForm" ng-submit="editPerson(employee._id, $parent.$parent.index, $parent.index)">
<input type="text" ng-model="nameEdit" id="nameEdit" placeholder="Employee" class="form-control" required></input>
<input type="text" ng-model="emailEdit" id="emailEdit" placeholder="Email" class="form-control" required></input>
<button type="submit" id="submitButton" class="btn btn-success form-actions">Submit</button>
</form>
</div>
</div>
And here's the directive code:
'use strict';
(function() {
angular
.module('sigFig')
.directive('showEmployeesList', showEmployeesList);
function showEmployeesList(sigFigFactory) {
var directive = {
restrict: 'E',
templateUrl: 'Directives/showEmployeesList/showEmployeesList.html',
scope: '=',
require: '^parentDirective',
link: link
};
return directive;
function link(scope, element, attra, controller) {
scope.deletePerson = function(id, index, employees) {
sigFigFactory.deletePerson(id).then(function(response) {
employees.splice(index, 1);
return response;
})
};
scope.editPerson = function(personId, index1, index2) {
scope.person = {
name: scope.nameEdit,
email: scope.emailEdit
};
console.log('person ', scope.person);
};
}
}
})();
I'm thinking it's some sort of scoping issue that I just don't see, and hoping someone can help. When I console.log that person object I get undefined for both properties.

it's good idea to use angular directive, and also you need to read more about it:
you just define scope as variable but it's object, and there isn't scope.nameEdit to console
app.directive("name", function() {
return {
templateUrl: "your.html", //it's string
restrict: 'E',
scope: { //it's object
param1: "=" //var
param2: "#" //string
param3: "&" //method and etc
},
link: function(scope){ //it's function
//scope.param1
//scope.param2
//scope.param3
}
}
})
<name param1="{foo: 'test'}" param2="hello" param3="callback"></name>
with directive you can pass everything from your basic view (controller) to the directive, you can $watch value on change in your controller and more options.

Angular.js: custom directive

I am trying to add custom directive in my app. But it is not getting called on button click event.
my controller-
appServices.directive('customClick', function() {
return {
restrict: 'E',
require: 'ngModel',
link: function($scope, element, attrs) {
$scope.deleteFieldMap = function() {
alert('inside click');
}
}
}
}
my jsp-
<button custom-click class="btn btn-danger btn-sm"
data-style="zoom-in"
ng-click="deleteFieldMap(editProductJob,$index)"
name="jobFileKey"
title="Delete" >
<span class="glyphicon glyphicon-remove"></span>
</button>
What i am doing wrong here?

Your directive is restricted to 'E'. Which means to "element".
You should change it to 'A' since you expect an it as an "attribute".
Check out the reference documentation :
https://docs.angularjs.org/guide/directive
Edit : As explained by Medet, you also miss the "ng-model" on your element. Remove the definition if is his unecessary or add the attribute if you really expect it.
Regards

First issue as noted above is element.restrict: 'A', seconds issue - you must have ng-model attribute on your button, demo below
angular.module('app', [])
.run(function($rootScope) {
$rootScope.test = '123qe';
}).directive('customClick', function() {
return {
restrict: 'A',
require: 'ngModel',
link: function($scope, element, attrs, ngModelCtrl) {
$scope.deleteFieldMap = function() {
alert('inside click' + ngModelCtrl.$viewValue);
}
}
}
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.js"></script>
<div ng-app="app">
<button custom-click ng-click="deleteFieldMap(editProductJob,$index)" ng-model="test">
remove
</button>
</div>

you should use your custom directive as follow:
<custom-click class="btn btn-danger btn-sm"
data-style="zoom-in"
ng-click="deleteFieldMap(editProductJob,$index)"
name="jobFileKey"
title="Delete" >
<span class="glyphicon glyphicon-remove"></span>
</custom-click>
as an element!

Angular, share directive template between click functions

I have a directive which, when called, passes in a controller and an array.
In the controller I pass in, there is an object I want to loop over.
my html looks like this:
<div class="row">
<div class="col-md-6">
<div class="jumbotron" ng-controller="protocolCtrl as pctrl">
<button type="button" id="protocol" class="btn btn-primary btn-lg" ng-click="pctrl.getUpdatedList()"
data-toggle="modal" data-target="#modal">Modify Current Protocols</button>
<!--IN THIS MODAL YOU CAN ADD/CHANGE/DELETE DATA-->
<modal-directive list="pctrl" headers="['ID', 'Protocol']"></modal-directive>
</div>
</div>
<div class="col-md-6">
<div class="jumbotron" ng-controller="categoryCtrl as cctrl">
<button type="button" id="category" class="btn btn-primary btn-lg" ng-click="cctrl.getUpdatedList()"
data-toggle="modal" data-target="#modal">Modify Current Categories</button>
<!--IN THIS MODAL YOU CAN ADD/CHANGE/DELETE DATA-->
<modal-directive list="cctrl" headers="['ID', 'Category']"></modal-directive>
</div>
</div>
</div>
My problem is that no matter what I do, it's always the FIRST directive in the html that showes up, no matter what button I press.
My directive looks like this:
.directive('modalDirective', function(){
return {
restrict: 'E',
templateUrl: '/directives/modal-directive.html',
scope: {
list: '=',
headers: '='
},
link: function(scope, element, attrs){
console.log(attrs.list + ' | ' + attrs.headers);
}
};
});
My modal-directive.html looks like this:
<table class="table table-striped">
<thead>
<tr>
<th ng-repeat="h in headers"> {{ h }} </th>
</tr>
</thead>
<tbody>
<!-- Loop through -->
<tr ng-repeat="l in list.list">
<!--Access the actual values inside each of the objects in the array-->
<td ng-repeat="data in l"> {{ data }} </td>
<td>
<button type="button" class="btn btn-primary btn-sm"
data-toggle="modal">Edit</button>
</td>
<td>
<button type="button" class="btn btn-danger btn-sm" ng-click="list.removeData(l)"
data-dismiss="modal">Remove</button>
</td>
</tr>
</tbody>
</table>
Am I using isolated scopes wrong, or is it something else I need to change in order to make this work?
Update
Here is a fiddle, that demonstrates the problem.
No matter which button i click, it displays the same text in the modal body.

You don't really need two controllers and two directives to achieve this. Below is an example of how you can do this. Notice I moved the controller to the row instead of having separate controllers for each column. The controller myCtrl now handles the click functions which are bound to the buttons using the ng-click attribute. This then determines the which text should be placed where by calling there respective functions. IE proto() and cat()
Now this may not be ideal for your situation depending on how you plan on the architecture of your application. But it works for your current problem in terms of what you have provided.
HTML
<body ng-app="TM">
<div class="row" ng-controller="myCtrl as modalControl">
<div class="col-md-6">
<div class="jumbotron" >
<button
ng-click='proto()'
type="button" id="protocol"
class="btn btn-primary btn-lg"
data-toggle="modal"
data-target="#modal">Modify Current Protocols
</button>
</div>
</div>
<div class="col-md-6">
<div class="jumbotron">
<button
ng-click='cat()'
type="button"
id="category"
class="btn btn-primary btn-lg"
data-toggle="modal"
data-target="#modal">Modify Current Categories
</button>
</div>
</div>
<!--IN THIS MODAL YOU CAN ADD/CHANGE/DELETE DATA-->
<modal-directive ctrl="modalControl"></modal-directive>
</div>
</body>
Angular JS
angular.module('TM', [])
.controller('myCtrl', function($scope){
$scope.text ='default';
$scope.proto = function() {
this.text = 'Now looking at the protocol part'
}
$scope.cat = function() {
this.text = 'Now looking at the category part'
}
})
.directive('modalDirective', function(){
return {
restrict: 'E',
scope: true,
template: ['<div id="modal" class="modal fade" role="dialog">',
'<div class="modal-dialog">',
'<div class="modal-content">',
'<div class="modal-header">',
'<h4 class="modal-title">Modal Header</h4>',
'</div>',
'<div class="modal-body">',
'<p> {{ text }} </p>',
'</div>',
'<div class="modal-footer">',
'<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>',
'</div>',
'</div>',
'</div>',
'</div>'].join('')
}
});
Demo:
https://jsfiddle.net/DTcHh/10193/
UPDATE:
Okay, I took another look. And even though the above example works. I noticed that I have a few extra things that I didn't necessarily need. For example myCtrl as modalControl doesn't need the as modalControl part. Below is an updated example. I did this one with some different simplified markup.
HTML:
<body ng-app="TestApp">
<div ng-controller="myCtrl">
<button ng-click="one()">One</button>
<button ng-click="two()">Two</button>
<test-directive></test-directive>
</div>
</body>
Angular Example (without Isolated Scope)
angular.module('TestApp', [])
.controller('myCtrl', function($scope){
$scope.text ='default';
$scope.one = function() {
this.text = 'this is one'
}
$scope.two = function() {
this.text = 'this is two'
}
})
.directive('testDirective', function(){
return {
template: "<div id='test'>{{text}}</div>"
}
});
Demo 2:
https://jsfiddle.net/krishollenbeck/v8tczaea/12/
Note this..
restrict: 'E',
scope: true
Was also not needed because I am not using Isolated scope in this example. More info here https://docs.angularjs.org/guide/directive

Please check this JSFiddle.
The reason is that data-target value points to the DOM element id of the modal. If you fixed this id in the directive template, clicking on the button will always initiate the modal with id modal. So you need to make the modalId as another parameter of the directive.
By the way, you can pass a controller to a directive. Just like this JSFiddle:
angular.module('Joy', [])
.controller('MyCtrl', ['$scope', function ($scope) {
this.value = 'Joy';
}])
.directive('passMeContrller', [function () {
return {
restrict: 'A',
scope: {
ctrl: '=',
},
template: '<div>Value: {{ctrl.value}}</div>'
};
}]);
The HTML:
<div ng-app="Joy" ng-controller="MyCtrl as c">
<div pass-me-contrller ctrl="c"></div>
<hr>
<div ng-bind="c.value"></div>
</div>
Because the controller itself is just a JavaScript object.
Just a reminder: you are using protocolCtrl as pctrl, so you need to specify like this.list=....
If you want to pass in a function to the isolated scope, use &.
However, I suggest not to pass in the whole controller to a directive. A controller is designed to:
Set up the initial state of the $scope object.
Add behavior to the $scope object.
Controllers are not supposed to be reused. Usually there are many properties on the $scope, while some of them passed to the directive will not be used by it.

AngularJS directive to add other directives not functional

I am trying to construct a directive that adds form groups to a particular div. I'm attempting doing this by binding a directive to a button in my html. My application is VERY simple as this is all I'm trying to do at the moment. Similar to this fiddle Anyway, my app initiates fine and the home controller is included. Also I get 200 status codes on the inclusion of my directive, and my code throws no errors. Here is my html:
<form id="addFields">
<div class="row">
<div class="col-xs-4">
</div>
<div class="col-xs-4 text-center">
<div addInputFieldsButton></div>
<input id="fieldName" placeholder="Enter field name:"></input>
<button id="addFieldBtn" addInputFields><span class="glyphicon glyphicon-plus"></span></button>
</div>
<div class="col-xs-4">
</div>
</div>
</form>
<div id="reviewFields">
</div>
Notice I am attempting both to add the button that is supposed to add input fields, and just bind the directive that adds input fields to an existing button as an attribute. Neither work.
addInputFields directive:
(function () {
angular.module('reviewModule')
.directive('addInputFields', addInputFields);
addInputFields.$inject = ['$log'];
function addInputFields ($log) {
return function (scope, element, attr) {
$log.debug('binding click event to add review button now.');
element.bind('click', function ($compile) {
$log.debug('button bound.');
angular.element(document.getElementById('reviewFields')).append($compile("<button>YOU MADE A BUTTON, COOL BRO</button>")(scope));
});
}
}
})()
and my directive for attempting to add a button that has the above binding:
(function () {
angular.module('reviewModule')
.directive('addInputFieldsButton', addInputFieldsButton);
addInputFieldsButton.$inject = ['$log'];
function addInputFieldsButton ($log) {
return {
restrict : 'E',
template : '<input id="fieldName" placeholder="Enter field name:"></input>\
<button id="addFieldBtn" addInputFields><span class="glyphicon glyphicon-plus"></span></button>'
};
};
})()
I copied the fiddle almost exactly, and really have no idea why nothing is happening while attempting to use either of these directives. Forgive me if my error is obvious, I am still pretty new to AngularJS.

I believe your second directive is not defined correctly on UI, it should be - separated with smaller case add-input-fields instead of addInputFields.
Code
(function () {
angular.module('reviewModule')
.directive('addInputFieldsButton', addInputFieldsButton);
addInputFieldsButton.$inject = ['$log'];
function addInputFieldsButton ($log) {
return {
restrict : 'E',
template : '<input id="fieldName" placeholder="Enter field name:"></input>\
<button id="addFieldBtn" add-input-fields><span class="glyphicon glyphicon-plus"></span></button>'
//^^^^^^^^^^^^^^^here is change
};
};
})()

Angular.js directive function return value in controller

I have a problem with directive.
In my directive i have init() a video player manipulation plugin.
Now in my html i have 2 buttons:
playVideo
markIn()
I want that user click on markIn() button directive return markin value to controller.
How ca do this?
I'm junior in angular.js
Thanks in advance
DIRECTIVE CODE
mwm3.directive('videoPlayer', function() {
return{
restrict: 'E',
link: function(scope, element, attrs) {
var myPlayer = angular.element(document.querySelector('#videoPlayer'));
element = VideoFrame({
id: myPlayer,
frameRate: 25,
callback: function(response) {
console.log('response');
}
});
scope.playVideo = function() {
//play video function
element.video.play();
}
scope.markIn = function() {
//markIn time
var markIn= element.toSMPTE();
//here i want return this value to my controller when user click on button ng-click="markIn()" in directive
}
}
}
});
CONTROLLER CODE
mwm3.controller('TestPlayerCtrl', function($scope) {
$scope.markIn = function(valueFromDirective) {
//here i want value Mrkin from directive MarkIn function when user click on markIn button
console.log(valueFromDirective);
};
});
HTML CODE
<video id="videoPlayer" width="100%" controls src="asset/tc3.mp4" type="video/mp4"></video>
</section>
<section id="videoControls">
<div class="row more-margin-bottom">
<div class="col-sm-12">
<button ng-click="playVideo()" class="btn btn-large btn-inverse"><i class="fa fa-play-circle fa-2x"></i></button>
<button ng-click="markIn()" class="btn btn-large btn-inverse"><i class="fa fa-pause fa-2x"></i></button>
</div>
</div>
</section>
</video-player>