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

【问题标题】：Angular JS How to invoke the directive scope functions from the directive template content eventsAngular JS如何从指令模板内容事件中调用指令范围函数
【发布时间】：2016-01-15 06:06:42
【问题描述】：

我想访问我保存在指令中的输入控件的 onChange 或 onKeypress 等事件。我能够访问我在“指令/控制器/范围”中声明的变量（例如，范围变量, directiveVar )，但我无法为输入控件的 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>

【问题讨论】：

onChange(syntax is onchange) 不会调用 angulars 方法。如果那是纯 javascript 函数，它将调用。使用 ng-change 代替。onchange 属性和控制器方法之间没有联系。

标签： javascript angularjs

【解决方案1】：

你应该使用ngChange directive（注意它需要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>

Plunker

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

不，模板由 Angular 编译一次，有一个特殊的 compile 钩子。更多关于这里的主题https://docs.angularjs.org/guide/compiler

【讨论】：

【解决方案2】：

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

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

【讨论】：