All geek questions in one place

Why is ng-click not working?

Why doesn't this simple ng-click example work at all? I have been using angular for several months in production, but this plunger puzzles me.

http://plnkr.co/edit/9Rp5JD?p=preview

If you notice, the ng-show properties work ... why not a click? It always warns by default, not an angular click.

<div ng-show="showTest" ng-click="alert('angular click')" onclick="alert('default click')">Default or angular click?</div>
<div ng-show="dontShowMeIsNotDefinedSoIWontShow" >Not showing me, I know angular is working!</div>

no isolated volume, no directive at all ... just a div. You can remove onclick ... another warning never fires. I’m sure what’s the matter, I became too shortsighted to find him.

the rest of the boring configuration:

angular.module('plunker', []);

var app = angular.module('plunker', [
    'plunker'
]);



app.config( function( ) {
        'use strict';
});



app.controller('MainCtrl', function($scope) { 
  var that = this;

  $scope.showTest = true;

});

whole html:

<!DOCTYPE html>
<html ng-app="plunker">

<head>
  <meta charset="utf-8" />
  <title>AngularJS Plunker</title>
  <link data-require="bootstrap-css@*" data-semver="3.2.0" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" />
  <script>
    document.write('<base href="' + document.location + '" />');
  </script>
  <link rel="stylesheet" href="style.css" />
  <script data-require="angular.js@1.2.x" src="https://code.angularjs.org/1.2.6/angular.js" data-semver="1.2.25"></script>

  <script src="app.js"></script>
</head>
<body ng-controller="MainCtrl as vm">

<br/><br/>

<div ng-show="showTest" ng-click="alert('angular click')" onclick="alert('default click')">Default or angular click?</div>
<div ng-show="dontShowMeIsNotDefinedSoIWontShow" >Not showing me, I know angular is working!</div>


</html>
+4
source share
2 answers

Angular eval, , alert -, .

https://docs.angularjs.org/guide/expression#context

Angular JavaScript eval() . Angular $parse .

Angular , . . - .

, $window $location , . .

, ​​ :

app.controller('MainCtrl', function($scope,$window) { 
  var that = this;

  $scope.showTest = true;
  $scope.alert = function() {
    $window.alert('angular click');
  };
});

DEMO

angular.module('plunker', []);

var app = angular.module('plunker', [
    'plunker'
]);

app.config( function( ) {
        'use strict';
});

app.controller('MainCtrl', function($scope,$window) { 
  var that = this;

  $scope.showTest = true;
  $scope.alert = function(text){
     $window.alert(text);
  };
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="plunker" ng-controller="MainCtrl">
<div ng-show="showTest" ng-click="alert('angular click')" onclick="alert('default click')">Default or angular click?</div>
<div ng-show="dontShowMeIsNotDefinedSoIWontShow" >Not showing me, I know angular is working!</div>
</div>
Hide result
+6

alert :

app.controller('MainCtrl', function($scope) { 
  var that = this;

  $scope.showTest = true;

  $scope.alert = function(msg) {
    alert(msg);
  };
});

, , ng-click , . , alert, .

+5

Source: https://habr.com/ru/post/1568067/

More articles:


All Articles