Angularjs directive

Question

I want to have an attribute directive a bit similar to ng-model. I just want to additionally bind an input fields value to a scope variable (just in one direction input field -> scope variable). So I have just tried this directive but I can not get the directive called anyway.

script:

.directive('passivemodel', function () {
  return {
    restrict: "A",
    scope: {
        passivemodel: '='
    },
    link: function (scope, element, attrs) {
        scope.$watch('passivemodel', function(newPassivemodel, oldPassivemodel) {
            console.log("passive model", newPassivemodel);
        });
    }
  };
})

html:

<input data-passivemodel="keyword">

Edit:

Hmmm .. based on vilo20 answer I am running into a very strange behavior.

while this code is working very well: <input data-ng-model="keyword" data-passivemodel="keyword">

this one does not (note the value of passivemodel): <input data-ng-model="keyword" data-passivemodel="keyword2"> . Sure I have defined the variable in the controller.

Controller:

.controller('SearchController', function($scope, $routeParams, $search) {
        $scope.search = new $search();
        $scope.keyword = "";
        $scope.keyword2 = "";
})

Edit2: here is a fiddle http://jsfiddle.net/HB7LU/12107/

Answer 1

try this:

.directive('passivemodel', function () {
        return {
            restrict: "A",
            scope: {
               passivemodel: '='
            },
            link: function (scope, element, attrs) {
                console.log("passive model", scope.passivemodel);
                $scope.$watch('passivemodel', function(newPassivemodel, oldPassivemodel) {
                //put your logic when passivemodel changed
                });
            }
        };
    })

Hope it helps

Edit: Here is a plunker http://plnkr.co/edit/T039I02ai5rBbiTAHfzv?p=preview

Answer 2

Use the scope attribute:

.directive('passivemodel', function () {
        return {
            restrict: "A",
            scope: {
                "passivemodel": "="
            },
            link: function (scope, element, attrs) {
                console.log("access passivemodel: ", scope.passivemodel);
            }
        };
    })

Answer 3

Finally it was as simple as that:

.directive('modelRed', [function(){
        return {
            require: 'ngModel',
            restrict: 'A',
            scope: {},
            link: function (scope, element, attrs, ngModel) {
                scope.$watch(function () {
                    return ngModel.$modelValue;
                }, function(newValue) {
                    scope.$parent[attrs.modelRed] = newValue;
                    //console.log(attrs.modelRed, newValue, scope);
                });
            }
        }
    }])

And in the html:

<p><input type="text" data-ng-model="testInput" data-model-red="redInput">{{redInput}}</p>

Of course you have to define testInput and redInput in the $scope object.