How to update value of ng-model with the expression in html part

问题

Why value of the ng-model is not updated with the expression. Before ng-model is defined value get updated

Value will be updated as soon as phase2 or phase3 changes

<input type="text" name="phase1" value="{{phase2 - phase3}}" ></input>

Value will not be updated

<input type="text" name="phase1" value="{{phase2 - phase3}}" ng-model="phase1"></input>

So I think of writing a directive which will evaluate the expression inside the directive and updated the output to model,

Here is html it will look like

<input type="text" name="phase1" ng-model="phase1" my-value="{{phase2 - phase3}}" my-model-value></input>

Directive:

myApp.directive('myModelValue', function(){
return {
            restrict: 'A',
            require: 'ngModel',
            scope: {
                model: '=ngModel',
                value: '@myValue'
            },
            link: function (scope, element, attr, controller) {
                scope.model = scope.value;
            }
        };

});

This directive evaluate only at load time, but I want to continuously update/watch as the dependent fields (phase2 & phase3) changes.

I can update value from controller but I want to do it from html. Please help me, it it possible or against the working of angular

回答1:

Thanks guys I figure out what I wanted to do. Here is the my final simple but useful directive :)

app.directive('myModelValue', function () {
        return {
            restrict: 'A',
            require: 'ngModel',
            scope: {
                model: '=ngModel'
            },
            link: function (scope, element, attr, controller) {
                attr.$observe('myModelValue', function (finalValue) {
                    scope.model = finalValue;
                });
            }
        };
    });

Usage:

<input type="text" ng-model="phase1" my-model-value="{{phase2 - phase3}}"></input>
<input type="text" ng-model="phase1.name" my-model-value="{{valid angular expression}}"></input>

回答2:

In order to continously watch the phase2/3 changes you can make use of $scope.$watch function.

Something like this will work for you:

link: function (scope, element, attr, controller) {
         scope.$watchCollection('[phase1,phase2]', function() {
            //whatever you want to do over here            }

and in the scope pass phase1 and phase2 values as well

回答3:

This will watch the  value expression and update the same when value will change

myApp.directive('myModelValue', function(){
return {
            restrict: 'A',
            require: 'ngModel',
            scope: {
                model: '=ngModel',
                value: '@myValue'
            },
            link: function (scope, element, attr, controller) {
                scope.$watch('value',function(newValue){
                      console.log(newValue);
               });
            }
        };
});
here value is a local scope so it will watch the expression 

来源：https://stackoverflow.com/questions/24818679/how-to-update-value-of-ng-model-with-the-expression-in-html-part