Ajuda na programação, respostas a perguntas / Angularjs / $ ViewValue não está sendo usado quando a diretiva de tipo de elemento - angularjs, angularjs-Directive, angularjs-ng-model

$ ViewValue não está sendo usado quando a diretiva de tipo de elemento - angularjs, angularjs-directive, angularjs-ng-model

Eu criei essa diretiva simples que usa um formatador e não atualiza a entrada quando a diretiva é usada como um elemento ou quando é um atributo de uma div.

JSBIN: http://jsbin.com/rifaxuvihu/edit?html,js,output

    angular.module("myApp", [])

.controller("myCtrl", function($scope) {

$scope.foo = "123";
console.log("------ MODEL CHANGED ($scope.foo = "123") ------");

$scope.changeModel = function() {
$scope.foo = "abc";
console.log("------ MODEL CHANGED ($scope.foo = "abc") ------");
};

})

.directive("myDirective", function() {
return {
restrict: "AE",
transclude: true,
require: "ngModel",
template: function($element, $attrs, $ctrls) {
var inp, lbl = "label";

if ($attrs.type == "html"){
inp = [
"<summernote class="form-control" ng-model="ngModel" ",
"   name="{{name}}" placeholder={{placeholder}} height="{{height}}"></summernote>"
];
lbl = "div";
} else
inp = [
"<input class="form-control" ng-model="ngModel" ",
"   type="{{type}}" />"
];

var ret = [
"<div class="advform-input form-group inp-{{type}} {{cols}}">",
"   <" + lbl + " class="advform-lbl">",
inp.join("n"),
"       <div class="helper" ng-if="type != "html"">{{ placeholder }}</div>",
"       <div class="desc">{{ desc }}</div>",
"   </" + lbl + ">",
"</div>"
].join("n");

return ret;
},
scope: {
placeholder: "@",
ngModel: "=?",
type: "@",
name: "@",
height: "@"
},
link: function ($scope, $element, $attrs, $ngModel) {
console.log("ooi");
if (true){

$ngModel.$formatters.unshift(function(modelVal) {
console.log("-- Formatter --", JSON.stringify({
modelVal:modelVal,
ngModel: {
viewVal: $ngModel.$viewValue,
modelVal: $ngModel.$modelValue
}
}, null, 2));
return 1 + "-) " +modelVal;
});

// same as $watch("foo")
$scope.$watch(function() {
return $ngModel.$viewValue;
}, function(newVal) {
console.log("-- $watch "foo" --", JSON.stringify({
newVal:newVal,
ngModel: {
viewVal: $ngModel.$viewValue,
modelVal: $ngModel.$modelValue
}
}, null, 2));
});
}
}
};
})

;

o html:

<!DOCTYPE html>

<html ng-app="myApp" ng-controller="myCtrl">

<head>

<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.0-beta.18/angular.min.js"></script>

</head>

<body>
<form name="form">
<my-directive type="text" name="foo" ng-model="foo"></my-directive>
<input my-directive type="text" name="foo" ng-model="foo" />
<div my-directive type="text" name="foo" ng-model="foo"></div>
</form>
<button ng-click="changeModel()">Change Model</button>
<p>$scope.foo = {{foo}}</p>
<p>Valid: {{!form.foo.$error.test}}</p>
</body>

</html>

Respostas:

1 para resposta № 1

O problema é que a diretiva cria um novo escopo e o viewValue do ngModel da diretiva é diferente daquele criado no modelo.
Para corrigi-lo, você pode alterar o ng-model do modelo para $ parent.ngModel.
Portanto, o formato funcionará conforme o esperado.