Question

我想访问输入控件的onChange或onKeypress之类的事件，我保存在指令中。我能够访问我在＆＃34;指令/控制器/范围＆＃34;中声明的变量。（例如，范围变量，directiveVar）但是我无法为输入控件的onChange事件调用myinput函数指令（也在范围中声明）。

我知道这个问题被多次询问，但老实说，我正在努力找到这个搜索关键字。因为，我们有链接和编译绑定事件的指令。但是进入我的场景，我只是从模板中调用指令控制器范围函数。

我想我必须首先编译我的指令模板？是不是。

＆＃13;

var myapp = angular.module('myapp', []);
angular.module('myapp').directive('helloWorld', function() {
  return {
    restrict: 'AE',
    template: 'First name: <input type="text" name="fname" onChange="myinput()"><br> Last name: <input type="text" name="lname"><br> {{directiveVar}}',
    controller: function ($scope) {
        $scope.color = '#0080ff';
        $scope.directiveVar = "I am directive varible";
        $scope.myinput = function() {
            console.log('This is the myinput');
        }
    }
  };
});

angular.module('myapp').controller('myCtrl', function($scope) {
    $scope.color = '#ffb399';
    $scope.controllerVar = "I am controller varible";
});

＆＃13;

<!DOCTYPE html>
<html ng-app="myapp">

<head>
    <title>AngularJS: UI-Router Quick Start</title>
    <!-- Bootstrap CSS -->
    <link href="lib/bootstrap/dist/css/bootstrap.css" rel="stylesheet">
    
</head>

<body ng-controller="myCtrl">
  
  <br />
  <br />
  <br />
  <br /> 
  <hello-world/>

<script src="lib/angular/angular.js"></script>
<script src="lib/angular-animate/angular-animate.js"></script>
<script src="lib/angular-bootstrap/ui-bootstrap-tpls.js"></script>
<script src="lib/angular-bootstrap-contextmenu/contextMenu.js"></script>

<script src="lib/angular-sanitize/angular-sanitize.js"></script>
<script src="lib/angular-ui-router/release/angular-ui-router.js"></script>
<script src="app.js"></script>

</body>
</html>

＆＃13;

Answer 1

您应该使用ngChange directive（请注意，它需要extensions.firebug.consoleexport.logFilePath）

ngModel

Plunker

我想我必须首先编译我的指令模板？是不是。

不，模板按角度编译一次，有一个特殊的<!doctype html> <html lang="en" ng-app="myapp"> <head> <meta charset="UTF-8"> <title>Example - example-ngChange-directive-production</title> <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.0-rc.0/angular.min.js"></script> <script> var myapp = angular.module('myapp', []); angular.module('myapp').directive('helloWorld', function() { return { restrict: 'E', template: 'First name: <input type="text" ng-model="fname"><br>' + 'Last name: <input type="text" ng-model="lname" ng-change="onChange()"><br>' + '{{fname + " " + lname}}', controller: function ($scope) { $scope.fname = 'fname'; $scope.lname = 'lname'; $scope.onChange = function(v) { alert('change'); }; } }; }); </script> </head> <body> <hello-world></hello-world> </body> </html>钩子。有关此主题的更多信息https://docs.angularjs.org/guide/compiler

Answer 2

请注意，您正在尝试使用html内置onChange事件，该事件位于Angularjs世界之外。您对myInput的调用会查找名为myInput的全局常规函数，该函数不存在。请改用ng-change=myInput()（https://docs.angularjs.org/api/ng/directive/ngChange）。此调用将在范围中查找myInput函数。

顺便提一下，请注意，即使你有一个全局myInput函数，函数所做的更改也可能不会生效，因为angular并不知道你已经更改了范围内的元素而且不知道它应该在html等上进行更改。

Angular JS如何从指令模板内容事件中调用指令范围函数

2 个答案: