pBlackmouth pBlackmouth - 13 days ago 5
AngularJS Question

angularjs directive link function not binding data from Controller

I have a directive that makes use of jquery events on the element parameter of the link function, this directive has an input that is binding to a value that is obtained from the main controller of the page, passed through nested directives in a isolated scope , but when changing the value in the input is not reflected in the original object from controller.

The object has the following structure:
Invoice 1:
- Product 1
- Product 2
Invoice 2:
- Product 3
- Product 4

When I change the amount of the invoice, the value is updated in the main controller, but when I change the amount of the product the change is not reflected.

This is my directive, what you should do is that when the user clicks on the value an input appears to be able to edit the value of the model:

angular.module("appDirectives").directive("eField", function () {
return {
restrict: "E",
templateUrl: "eFieldTemplate.html",
scope: {
value: "="
},
controller: function ($scope) {
$scope.IsMouseOut = true;
$scope.IsMouseIn = false;
$scope.MouseClick = false;
$scope.OnMouseEnter = function () {
if (!$scope.MouseClick) {
$scope.IsMouseOut = false;
$scope.IsMouseIn = true;
$scope.MouseClick = false;
}
}

$scope.OnMouseLeave = function () {
if (!$scope.MouseClick) {
$scope.IsMouseOut = true;
$scope.IsMouseIn = false;
$scope.MouseClick = false;
}
}

$scope.OnMouseClick = function () {
$scope.IsMouseOut = false;
$scope.IsMouseIn = false;
$scope.MouseClick = true;
}

$scope.EndEdit = function () {
$scope.IsMouseOut = true;
$scope.IsMouseIn = false;
$scope.MouseClick = false;
}
},
link: function (scope, el, attrs) {
el.on("mouseenter", function () {
scope.OnMouseEnter();
scope.$apply();
});

el.on("mousemove", function () {
scope.OnMouseEnter();
scope.$apply();
});

el.on("mouseleave", function () {
scope.OnMouseLeave();
scope.$apply();
});

el.on("click", function () {
scope.OnMouseClick();
if (el[0].querySelector('input'))
el[0].querySelector('input').select();
scope.$apply();
});
}
};
});


Any Suggestions?

I give the example here: Plunker

joe joe
Answer

using ng-if makes it create/destroy new html nodes and it seems to be unable to cope with that. change to ng-show and it will work. i also added a body mouse capture so it ends the edit.

<div>
<div ng-show="IsMouseIn">
    <input type="text" ng-model="value" class="form-control input-sm" />
</div>
<div ng-show="IsMouseOut"  ng-click="OnMouseClick()">
    {{value}}
</div>
<div ng-show="MouseClick">
    <input  type="text" ng-model="value" class="form-control input-sm" />
</div>

view plunker