Question

我已经写了指令我只想要放置指令的元素中的所有ng-model元素这是带有loggerhelp指令

的html元素

<input type="text" loggerhelp  />

这是我的指示

    angular
 .module('app').directive('loggerhelp', loggerhelp);


loggerhelp($mdDialog) {
        var Popupdirective = {
            restrict: 'A',
            scope: false,
            link: popupController
        }
        return Popupdirective
        function popupController(scope, element, attr) {
// Here i want all the child ng-model elements.
            console.log(element)
            alert();
        }
    }

Answer 1

您是否尝试过像element.find("[ng-model]")这样的searching by attribute？ element是此指令匹配的jqLite包装元素，因此find和选择器应该适合您。

＆＃13;

angular.module('myApp', [])
.controller('MyCtrl', ['$scope', function MyCtrl($scope) {
  
}])
.directive('loggerhelp', function loggerhelp() {
        var loggerhelpDirective = {
            restrict: 'A',
            scope: false,
            link: loggerhelpController
        }
        return loggerhelpDirective
        function loggerhelpController(scope, element, attr) {
            var innerElementsWithNgModel = element.find("[ng-model]");
            console.log(innerElementsWithNgModel.length);
            console.log(angular.element(innerElementsWithNgModel[2]).attr('ng-model'));
            
            //so now you have an array with all the elements that have ng-model attr
            //you can attach event handler function for blur 
            innerElementsWithNgModel.on('blur', function(){
                var ngModelAttr = angular.element(this).attr('ng-model');
                //we can evaluate this now using $eval
                if (ngModelAttr){
                  console.log(scope.$eval(ngModelAttr));
                }
            });
        }
    });

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//code.angularjs.org/1.6.2/angular.js"></script>

<div ng-app="myApp">
  <div ng-controller="MyCtrl as $ctrl">

    <div loggerhelp>
      <input type="text" ng-model="$ctrl.model1"  />
      <input type="text" ng-model="$ctrl.model2"  />
      <input type="text" ng-model="$ctrl.model3"  />
      <input type="text" ng-model="$ctrl.model4"  />
    </div>
  </div>
</div>

＆＃13;

更新1：工作代码段以说明其工作原理。

更新2：现在，我们可以使用.on()和evaluate the attribute using $eval()为模糊事件附加事件处理函数。

Answer 2

您可以通过指令的第四个参数来实现此目的，即NgModelController，Read doc.

代码应该是：

 link: function(scope, element, attr, ngModel) {
      $timeout(function() {
        console.log(element);
        console.log(ngModel.$viewValue);
      }, 0)
    }

请参阅此example fiddle

查找特定子元素的所有ng-model元素

2 个答案: