Блог

Я пытаюсь создать директиву для моего приложения в Angular и мне нужно передать значение моему контроллеру

У меня есть что-то вроде

 controllers.directive('checkBox', function() {
    return {
        restrict: 'E',
        scope: {
            checkAll: '=',
        },
        template: '<input check-all="checkAll" type="checkbox" ng-model="check"/>',
        replace: true,
        link: function(scope) {
            scope.$watch('checkAll', function(newVal){
                scope.check = newVal;
            })
        }
    }
})

app.controller('test', function(){
    $scope.submit=function(){
    //not sure how to get the checkbox value as $scope.check is undefined....        
    }
})
  

HTML

 <div ng-controller="test">
 <div class="checkbox" ng-repeat="item in items">
      <check-box></check-box>{{item.name}}
 </div>
  <button type="button" ng-click="submit()">submit</button
</div>
  

Вы используете двустороннюю привязку с использованием = for checkAll .

 scope: {
    checkAll: '=',
}
  

Вот как вы это делаете. По сути, ваша директива будет иметь check-all атрибут и любую $scope переменную, которую вы передадите ей из представления контроллера, вы можете изменить эту переменную внутри директивы, и значение будет отражено обратно в контроллере.

Итак, допустим, у вашего контроллера есть переменная области видимости с именем testValue . Затем вы можете использовать его в разметке следующим образом:

 <div class="checkbox" ng-repeat="item in items">
    <check-box check-all="testValue"></check-box>{{item.name}}
</div>
  

И теперь все, что директива делает с checkAll функцией link директивы, будет отражено в функции вашего контроллера $scope.testValue .

Итак, если вы хотите, чтобы какая-то другая переменная в вашем контроллере получала другое значение, просто добавьте другой атрибут для вашей директивы, например checkAll , и он должен выполнить свою работу.

Надеюсь, это поможет.

ОБНОВЛЕНО:

Я правильно прочитал ваш код и думаю, что знаю, что вам нужно. Позвольте мне попробовать переработать это для вас.

 controllers.directive('checkBox', function() {
    return {
        restrict: 'E',
        scope: {
            ngModel: '=',
            checkAll: '='
        },
        template: '<input check-all="checkAll" type="checkbox" ng-model="ngModel"/>',
        replace: true,
        link: function(scope) {
            scope.$watch('checkAll', function(newVal){
                scope.check = newVal;
            })
        }
    }
})

app.controller('test', function(){
    $scope.submit=function(){
      console.log($scope.checkboxVariable);
      // or use $http service to send the value
    }
})
  

HTML

 <div ng-controller="test">
  <div class="checkbox" ng-repeat="item in items">
    <check-box ng-model="checkboxVariable"></check-box>{{item.name}}
  </div>
  <button type="button" ng-click="submit()">submit</button
</div>
  

Позвольте мне немного объяснить это.

Я думаю, что вы хотите, чтобы ваша директива заменяла элемент ввода checkbox. И когда это проверяется, тогда что-то в области видимости должно быть установлено. Директива не может ничего устанавливать, если ей не разрешено устанавливать значение в области контроллера. Этого вы можете достичь, используя двойную привязку с помощью = настройки. Итак, мы определили новый атрибут scope, вызываемый ngModel с двойной привязкой. И в разметке мы передаем ему переменную области видимости с именем check . Теперь, когда флажок ввода установлен / снят, область действия директивы получает свое значение из ngModel переменной своей собственной области. И поскольку ngModel имеет двойную привязку к нему, это отражается в check переменной контроллера.

Надеюсь, это поможет.