如何獲取指令內輸入字段的值

Question

我有一個指令<stu-directive>，其中包含輸入字段和一個select。如何獲取在指令函數中鍵入或選擇的值。

<div class="certFull"> 

<stu-directive obj ="certObj" ng-model="stuDirModel"></stu-directive> 

<div class="addDir col-md-12 mg"> 

這是該指令的HTML：

<div ng-transclude class="container-fluid stuDirectiveClass mg"> 
<div class="rows"> 
    <div class="col-md-12 mg"> 
     <div class="form-group"> 
      <div class="rows"> 
       <div class="col-md-6"><label for="studentNameId">Student name</label></div> 
       <div class="col-md-6"> 
        <select class="form-control" ng-model="selectStudent"> <!--get this value--> 
         <option>Stu1</option> 
         <option>Stu2</option> 
         <option>Stu3</option> 
         <option>Stu4</option> 
        </select> 
       </div> 
      </div> 
     </div> 
    </div> 
    <div class="col-md-12"> 
     <div class="form-group mg"> 
      <div class="rows"> 
       <div class="col-md-6"><label for="studentNameId">Student mark</label></div> 
       <div class="col-md-6"> 
        <input type="text" class="form-control" ng-model="studentMark" placeholder="Student mark" /> <!--get this value--> 
       </div> 
      </div> 
     </div> 
    </div> 
</div> 

該指令功能：

uiRouteApp.directive('stuDirective', function() { 

    return { 

     restrict: 'E', 
     //scope: { 
     // externalObj: '=obj' 
     //}, 
     transclude: true, 
     templateUrl: 'htmlFiles/stuDirective.html', 
     link: function link(scope, element, attrs) { 
      //how do i access the input field values in directive 
     }, 
     controller: ['$scope','$timeout', function ($scope,$timeout) { 
      console.log($scope.selectStudent); // undefined 

     }] 

    } 
}) 

Answer 1

你需要一些像這樣的事件：（或者，如果你不希望使用事件，然後使用$表）

var app = angular.module('app', function() {}); 
 

 
app.directive('stuDirective', function() { 
 
    return { 
 

 
     restrict: 'E', 
 
     transclude: true, 
 
     //templateUrl: 'htmlFiles/stuDirective.html', 
 
     link: function link(scope, element, attrs) { 
 
     scope.Print = function(){ 
 
      console.log(scope.selectStudent + ' ' +scope.studentMark);  
 
      }; 
 
     }, 
 
     controller: ['$scope','$timeout', function ($scope,$timeout) { 
 
      
 

 
     }] 
 

 
    }; 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 

 

 
<div class="certFull" ng-app="app"> 
 

 
<stu-directive obj ="certObj" ng-model="stuDirModel"></stu-directive> 
 

 
\t <div class="container-fluid"> 
 
<div class="rows"> 
 
    <div class="col-md-12 mg"> 
 
     <div class="form-group"> 
 
      <div class="rows"> 
 
       <div class="col-md-6"><label for="studentNameId">Student name</label></div> 
 
       <div class="col-md-6"> 
 
        <select class="form-control" ng-model="selectStudent"> <!--get this value--> 
 
         <option>Stu1</option> 
 
         <option>Stu2</option> 
 
         <option>Stu3</option> 
 
         <option>Stu4</option> 
 
        </select> 
 
       </div> 
 
      </div> 
 
     </div> 
 
    </div> 
 
    <div class="col-md-12"> 
 
     <div class="form-group mg"> 
 
      <div class="rows"> 
 
       <div class="col-md-6"><label for="studentNameId">Student mark</label></div> 
 
       <div class="col-md-6"> 
 
        <input type="text" class="form-control" ng-model="studentMark" placeholder="Student mark" /> <!--get this value--> 
 
       </div> 
 
       <div class="col-md-6"> 
 
        <button ng-click="Print()">Call Dir</button> 
 
       </div> 
 
      </div> 
 
     </div> 
 
    </div> 
 
</div> 
 

 

 
<div class="addDir col-md-12 mg">

Answer 2

男人你的避風港」

使用我的指令中的HTML在你的html中提到你的指令，你的指令也是基於元素的。你需要在html中使用你的指令作爲元素。

請通過這些鏈接來幫助您。 https://www.w3schools.com/angular/angular_directives.asp

https://docs.angularjs.org/guide/directive

見代碼片段，我能夠獲得元素的指令。

var app = angular.module('app', function() {}); 
 

 
app.directive('stuDirective', function() { 
 

 
    return { 
 

 
     restrict: 'E', 
 
     transclude: true, 
 
     //templateUrl: 'htmlFiles/stuDirective.html', 
 
     link: function link(scope, element, attrs) { 
 
      scope.Details = function(){ 
 
      console.log(scope.selectStudent + ' ' +scope.studentMark);  
 
      }; 
 
     }, 
 
     controller: ['$scope','$timeout', function ($scope,$timeout) { 
 
      
 

 
     }] 
 

 
    }; 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 

 
<div class="certFull" ng-app="app"> 
 

 
<stu-directive obj ="certObj" ng-model="stuDirModel"></stu-directive> 
 

 
\t <div class="container-fluid"> 
 
<div class="rows"> 
 
    <div class="col-md-12 mg"> 
 
     <div class="form-group"> 
 
      <div class="rows"> 
 
       <div class="col-md-6"><label for="studentNameId">Student name</label></div> 
 
       <div class="col-md-6"> 
 
        <select class="form-control" ng-model="selectStudent"> <!--get this value--> 
 
         <option>Stu1</option> 
 
         <option>Stu2</option> 
 
         <option>Stu3</option> 
 
         <option>Stu4</option> 
 
        </select> 
 
       </div> 
 
      </div> 
 
     </div> 
 
    </div> 
 
    <div class="col-md-12"> 
 
     <div class="form-group mg"> 
 
      <div class="rows"> 
 
       <div class="col-md-6"><label for="studentNameId">Student mark</label></div> 
 
       <div class="col-md-6"> 
 
        <input type="text" class="form-control" ng-model="studentMark" placeholder="Student mark" /> <!--get this value--> 
 
       </div> 
 
       <div class="col-md-6"> 
 
        <button ng-click="Details()">Call Dir</button> 
 
       </div> 
 
      </div> 
 
     </div> 
 
    </div> 
 
</div> 
 

 

 
<div class="addDir col-md-12 mg">

Answer 3

始終使用.在ng-model

在你的指令，然後纔在全球化志願服務青年控制器名稱定義一個變量ng-model

uiRouteApp.directive('stuDirective', function() { 
 

 
    return { 
 

 
     restrict: 'E', 
 
     //scope: { 
 
     // externalObj: '=obj' 
 
     //}, 
 
     transclude: true, 
 
     templateUrl: 'htmlFiles/stuDirective.html', 
 
     link: function link(scope, element, attrs) { 
 
      //how do i access the input field values in directive 
 
     }, 
 
     controller: ['$scope','$timeout', function ($scope,$timeout) { 
 
      var stuDirectiveCtrl = this; 
 
      stuDirectiveCtrl.selectStudent = ''; 
 
      
 
      stuDirectiveCtrl.log = function(){ 
 
       console.log(this.selectStudent); 
 
      } 
 

 
     }], 
 
     controllerAs:'stuDirectiveCtrl' 
 

 
    } 
 
})

<select class="form-control" ng-change="stuDirectiveCtrl.log()" ng-model="stuDirectiveCtrl.selectStudent"> <!--get this value--> 
 
    <option value="1">Stu1</option> 
 
    <option value="2">Stu2</option> 
 
    <option value="3">Stu3</option> 
 
    <option value="4">Stu4</option> 
 
</select>

使用controllerAs你可以在html中引用你的控制器。

Answer 4

走進你必須使用你的指令，因爲元素，並添加到它包含你應該使用到指令值的屬性，例如HTML：

<stu-directive selected="selectStudent"></stud-directive> 

指令應該使用範圍爲保存值，例如：

uiRouteApp.directive('stuDirective', function() { 

return { 

    restrict: 'E', 
    scope: { 
     selected: '=' 
    }, 
    transclude: true, 
    templateUrl: 'htmlFiles/stuDirective.html', 
    link: function link(scope, element, attrs) { 
     console.log(scope.selected); 

    }] 

} 

Answer 5

             
  
 
   
 
    
angular.module("myApp",[]) 
 
    .directive('stuDirective', function() { 
 

 
     return { 
 

 
      restrict: 'E', 
 
      scope:{ 
 
       selectStudent:'@', 
 
       studentMark:'@' 
 
      }, 
 
      template: '<div class="container-fluid stuDirectiveClass mg"><div class="rows"><div class="col-md-12 mg"><div class="form-group"><div class="rows"><div class="col-md-6">label for="studentNameId">Student name</label></div>  <div class="col-md-6"><select class="form-control" ng-model="selectStudent"><option>Stu1</option>     <option>Stu2</option><option>Stu3</option>     <option>Stu4</option></select></div></div></div></div><div class="col-md-12"><div class="form-group mg"><div class="rows"> <div class="col-md-6"><label for="studentNameId">Student mark</label></div><div class="col-md-6"><input type="text" class="form-control" ng-model="studentMark" placeholder="Student mark" /></div></div></div></div></div>', 
 
      link: function link(scope, element, attrs) { 
 
      }, 
 
      controller: function ($scope,$timeout) { $scope.$watch('[studentMark,selectStudent]',function(value,value1){ 
 
       console.log(value) 
 
       console.log(value1) 
 
       }) 
 

 
      } 
 

 
     } 
 
    })
 
    
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
    <html> 
 
     <body ng-app="myApp"> 
 
      <stu-directive></stu-directive> 
 
     </body> 
 
    </html>