Question

我有一个带有输入字段且<stu-directive>的指令select。如何获取在指令函数中键入或选择的值。

使用我的指令的html：

<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

你在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>

	<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 2

始终在.
中使用ng-model

在指令中定义一个变量，然后在ng-model

之前引用控制器名称

＆＃13;

  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'

    }
})

＆＃13;

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

＆＃13;

使用controllerAs，您可以用html重新控制您的控制器。

Answer 3

在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 4

你需要这样的事件:(或者如果你不想使用事件，那么使用$ watch）

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

如何获取指令内输入字段的值

5 个答案: