Angular JS如何從指令模板內容事件中調用指令範圍函數

我想訪問輸入控件的onChange或onKeypress等事件，這些事件存放在指令中。我能夠訪問我聲明的變量在「指令/控制器/範圍」（例如，範圍變量，directiveVar）中，但我無法爲輸入控件的onChange事件調用myinput函數指令（也在範圍中聲明）。Angular JS如何從指令模板內容事件中調用指令範圍函數

我知道這個問題被問了很多次，但老實說，我試圖找到什麼是這個搜索關鍵字。因爲，我們已經鏈接並編譯了綁定事件的指令。但是來到我的場景中，我只是從模板中調用指令控制器範圍函數。

我想我必須先編譯我的指令模板？這樣對嗎。

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>

來源

2016-01-15 user3278897

onChange（語法是onchange）將不會調用angulars方法。如果這是純粹的JavaScript函數它將調用。ng-change而不是那個。onchange屬性和控制器方法之間沒有連接。 – sundar

您應該使用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

我想我已經編譯我的指示第一個模板？這樣對嗎。

不，模板按角度編譯一次，有一個特殊的compile掛鉤。更多關於這裏的主題https://docs.angularjs.org/guide/compiler

來源

2016-01-15 06:40:14 sbedulin

請注意，您正在嘗試使用Angularjs世界之外的html內置onChange事件。您撥打myInput，查找名爲myInput的全球常規功能，該功能不存在。改爲使用ng-change=myInput()（https://docs.angularjs.org/api/ng/directive/ngChange）。此調用將查找作用域中的myInput函數。

順便說一句，即使你有一個全局的myInput函數，函數所做的改變可能不會生效，因爲角度不知道你已經改變了作用域中的元素，並且不知道它應該呈現更改在HTML等

來源

2016-01-15 06:49:29 user967710

Angular JS如何從指令模板內容事件中調用指令範圍函數

回答

相關問題