All geek questions in one place

Ng-click event does not fire span element

Why doesn't ng-click work in the code below? It should be easy. What am I missing. Thanks

(function() {
    'use strict';
    // Set up the app.
    var mainApp = angular.module('mainApp', []);

    // Create a controller.
    mainApp.controller('navController', ['$scope', '$log' ,function($scope, $log) {
        //$scope.firstName= "John";
        //$scope.lastName= "Doe";,
        $scope.openTab = function (tabNumber) {
            $log.log(tabNumber);
        };

        var s =1;
    }]);
}());
<!DOCTYPE html>
<html>
    <head>
        <script src="/js/angular.js"></script>
        <script src="/js/app/app.js"></script>

        <link rel="stylesheet" href="/css/styles.css" />

    </head>
    <body ng-app="mainApp">
        <div class="navigation" ng-controller="navController as nc">
            <!--<p>Name: <input type="text" ng-model="name"></p>
            <p ng-bind="name"></p>
            <p>{{name}}</p>
            -->
            <span ng-click="nc.openTab(1)" class="btn"> tab 1</span>
            <span ng-click="nc.openTab(2)" class="btn"> tab 2</span>
            <span ng-click="nc.openTab(3)" class="btn"> tab 3</span>
        </div>
    </body>
</html>
Run codeHide result
+4
source share
3 answers

When you use controllerAs, you need to bind variables and methods directly to the controller instance, thisinstead $scope.

// this.firstName = "John";
// this.lastName = "Doe";
this.openTab = function (tabNumber) {
    $log.log(tabNumber);
};

As controllerAsset controller instance, thisthe controller functions $scope.nc.

+4
source

You are using $scopein the controller, but in the view that you are using as.

as , this

this.openTab = function (tabNumber) {
    $log.log(tabNumber);
};

,

<span ng-click="openTab(1)" class="btn"> tab 1</span>
<span ng-click="openTab(2)" class="btn"> tab 2</span>
<span ng-click="openTab(3)" class="btn"> tab 3</span>
+1

Please try this.

    (function() {
    'use strict';
    // Set up the app.
    var mainApp = angular.module('mainApp', []);

    // Create a controller.
    mainApp.controller('navController', ['$scope', '$log' ,function($scope, $log) {
        //$scope.firstName= "John";
        //$scope.lastName= "Doe";,
        $scope.openTab = function (tabNumber) {
            $log.log(tabNumber);
        };

        var s =1;
    }]);
    }());


<!DOCTYPE html>
<html>
    <head>
        <script src="/js/angular.js"></script>
        <script src="/js/app/app.js"></script>

        <link rel="stylesheet" href="/css/styles.css" />

    </head>
    <body ng-app="mainApp">
        <div class="navigation" ng-controller="navController">
            <!--<p>Name: <input type="text" ng-model="name"></p>
            <p ng-bind="name"></p>
            <p>{{name}}</p>
            -->
            <span ng-click="openTab(1)" class="btn"> tab 1</span>
            <span ng-click="openTab(2)" class="btn"> tab 2</span>
            <span ng-click="openTab(3)" class="btn"> tab 3</span>
        </div>
    </body>
</html>
0
source

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

More articles:


All Articles