2015-03-24 5 views
1

Я хочу иметь директиву атрибута, немного похожую на ng-модель. Я просто хочу дополнительно привязать значение входных полей к переменной области видимости (только в одном направлении - поле переменной поля). Поэтому я просто попробовал эту директиву, но я не могу получить директиву, называемую так или иначе.Директива Angularjs

сценарий:

.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:

Хммм .. на основе vilo20 ответа я бегу в очень странное поведение.

в то время как этот код работает очень хорошо: <input data-ng-model="keyword" data-passivemodel="keyword">

это не делает (обратите внимание на значение passivemodel): <input data-ng-model="keyword" data-passivemodel="keyword2">. Конечно, я определил переменную в контроллере.

Контроллер:

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

Edit2: здесь скрипку http://jsfiddle.net/HB7LU/12107/

+0

Посмотрите на плункер, который я сделал для вас в своем ответе – vlio20

ответ

0

Наконец это было так просто:

.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); 
       }); 
      } 
     } 
    }]) 

И в HTML:

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

Конечно, вы должны определить testInput и redInput в объекте $scope.

0

Используйте атрибут сферы:

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

попробовать это:

.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 
       }); 
      } 
     }; 
    }) 

Надежда это он LPS

Edit: Вот plunker http://plnkr.co/edit/T039I02ai5rBbiTAHfzv?p=preview

+0

Да, это работает! Но теперь у меня есть область действия, ограниченная директивой? Как я могу получить доступ к области контроллеров сейчас? – KIC

+0

Из-за '=' обе области привязаны (привязаны). Попробуйте изменить passivemodel из директивы - вы увидите, что она также изменяется в родительской области. – vlio20

+0

Если ответ помог вам, PLS принять его :) – vlio20

Смежные вопросы