Once user click on the Input field .. I want to get the ID of the input field & filter the Object & bind the data on the Popover window. But Scope is not getting updated from directive. Below are the code please let me know where i'm doing wrong
var app = angular.module('MyModule', []);
app.controller("TestController", function ($scope, $window) {
//$scope.ID = '0';
$scope.myObj = [{ "ID": 0, "Name": 'user0' }, { "ID": 1, "Name": 'user1' }, { "ID": 2, "Name": 'user2' }]
$scope.GetData = function () {
var match = $.grep($scope.myObj, function (e) {
return e.ID == $scope.myID
});
return match;
};
});
app.directive('popOver', function ($compile, $timeout) {
return {
restrict: 'A',
link: function (scope, el, attrs) {
$(el).bind('click', function () {
scope.$apply(function () {
scope.myID = attrs.popoverid ;
});
});
$(el).popover({
placement: 'bottom',
container: 'body',
trigger: "click",
content: $compile($('#popover-content').html())(scope)
});
}
};
});
<div ng-repeat="i in [0,1,2]">
<input style="background: transparent"
type="text"
pop-over
popoverid="{{i}}"
id="{{i}}"
class="form-control enterTime" data-html="true">
<br /><br />
</div>
<div class="bottom hide" id="popover-content">
<div class="arrow" style="left: 47%;"></div>
<div class="Bground-Project">
<table>
<tr>
<td>
{{GetData()}}
</td>
</tr>
</table>
<button type="button" ng-click="buttonClicked()">click me</button>
</div>
</div>
when a primitive type (i.e., a string, number, or boolean type) is written to -- e.g., scope.name = newName -- the "write" always goes to the local scope/object. In other words, the child scope gets its own name property that shadows the parent property of the same name. The fix is to use an object, rather than a primitive type, in the parent scope. The child scope will then get a reference to that object. Any writes to the object properties (whether from the parent or the child) will go to that one object. (The child scope does not get its own object.)
Is it Possible to Update Parent Scope from Angular Directive with scope: true?