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

Angular JS How to invoke the directive scope functions from the directive template content events

本文关键字：指令 事件 调用 函数 范围 JS Angular      更新时间：2023-09-26

我想访问输入控件的onChange或onKeypress等事件，我将其保存在指令中。我能够访问我在"指令/控制器/范围"中声明的变量（例如，范围变量，指令Var），但我无法为输入控件的onChange事件调用myinput函数指令（也在范围内声明）。

我知道这个问题被问了很多次，但老实说，我试图找到这个的搜索关键字是什么。因为，我们有链接和编译绑定事件的指令。但是来到我的场景，我只是从模板调用指令控制器作用域函数。

我想我必须先编译我的指令模板吗？ 对吗。

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";
});    
<!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>

你应该使用 ngChange 指令（注意它需要 ngModel ）

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

普伦克

我想我必须先编译我的指令模板吗？ 对吗。

不，模板是通过角度编译一次的，有一个特殊的compile钩子。有关该主题的更多信息，请点击此处 https://docs.angularjs.org/guide/compiler

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

顺便说一下，请注意，即使您有一个全局 myInput 函数，该函数所做的更改也可能无法生效，因为 angular 不知道您更改了范围内的元素，也不知道它应该在 html 等上呈现更改。

相关文章：