将 ng-click 连接到控制器功能

Question

我无法获取部分 div 的 ng-click 属性来触发我想要的函数，称为 testDivClicked()。

在我的应用程序控制器中，我提供了一个到名为 test:

的部分的路由

(function () {
    "use strict";

    angular
        .module('myApp', ['ngRoute', 'ui.bootstrap', 'myApp.main', 'myApp.test'])
        .config(config);

    config.$inject = ['$routeProvider'];

    function config($routeProvider) {
        $routeProvider
            .when('/', {templateUrl: '/partials/main.html', controller: 'MainController', controllerAs: 'vm'})
            .when('/test', {templateUrl: '/partials/test/test.html', controller: 'TestController', controllerAs: 'vm'})
            .otherwise({redirectTo: '/'});
    }
})();

这是插入到父视图中的 test.html 部分：

<div class="outer-holder test-outer-holder">
    <div class="middle-holder test-middle-holder">
        <div class="inner-holder test-inner-holder">
            <div class="test-container" ng-click="vm.testDivClicked('test-container')">
                <legend>Test</legend>
            </div>
        </div>
    </div>
</div>

我的test控制器：

(function () {
    "use strict";

    angular
        .module("myApp.test")
        .controller("TestController", TestController);

    TestController.$inject = [];

    function TestController() {
        var vm = this;

        function testDivClicked(msg) {
            console.log("message:", msg);
        }
    }
})();

当我点击最里面的 div 时，我想 testDivClicked() 记录我点击了它。

我在此设置中缺少什么，可以让我 ng-click 工作？

Answer 1

你应该写 vm.testDivClicked = function(msg) 而不是 function testDivClicked。您声明了一个局部函数。

Answer 2

为创建控制器提供的模块名称myApp.test是错误的。而是使用 angular.module("myApp")

所以你的测试控制器应该是

(function () {
    "use strict";

    angular
        .module("myApp")
        .controller("TestController", TestController);

    TestController.$inject = [];

    function TestController() {
        var vm = this;

        function testDivClicked(msg) {
            console.log("message:", msg);
        }
    }
})();

Answer 3

正如 Alexander 先前所说，函数 testDivClicked 函数与 vm(this) 没有关联。所以它在 dom 中不被识别为 vm.testDivClicked('test-container')。

这里是修改的部分。

function TestController() {
        var vm = this;

      vm.testDivClicked = function(msg) {
            console.log("message:", msg);
        }
    }

将 ng-click 连接到控制器功能

Connecting ng-click to controller function

javascript

angularjs

angular-ui-router

angularjs-ng-click