Question

我有一个控制器，我已添加了一个函数，但无法从ng-click锚点调用该函数。我看过类似的帖子，但不能真正看到我可能遗失的东西。它似乎无法看到控制器功能？

模块和控制器：

var commonModule = angular.module('common', ['ngRoute', 'ng.ckeditor']);
var mainModule = angular.module('main', ['common']);
//mainModule.config(function ($routeProvider, $locationProvider) { 
//    $locationProvider.html5Mode(true);
//});

commonModule.factory('viewModelHelper', function ($http, $q, $window, $location) {
    return MyApp.viewModelHelper($http, $q, $window, $location);
});
commonModule.factory('validator', function () {
    return valJs.validator();
});


    mainModule.controller("rootViewModel",
        function ($scope, $http, $q, $routeParams, $window, $location, viewModelHelper, $rootElement) {

            //test
            console.log("creating controller");

            var self = this;

          viewModelHelper.apiGet('api/PageContent/1', null,
          function (result) {
              $scope.htmlEditor = result.data;
          });

          $scope.ToggleEditor2 = function () {

              //test
              console.log("hello");

                if ($scope.editorVisible == true) {
                    $scope.editorVisible = false;
                }
                else {
                    $scope.editorVisible = true;
                }
            }
        });

控制器在页面的根级引用：
在这种情况下，因为我使用ASP.Net MVC，在我的_layout.cshtml

<body data-ng-app="main" data-ng-controller="rootViewModel">

在一个加载的（mvc）视图中，我有一个带有ng-click的按钮，它调用了ToggleEditor2函数，但从未调用过。无法在chrome dev控制台中获得断点，我也看不到任何写入日志的内容。

<input type="button" ng-click="ToggleEditor2()" value="test me" />

更新：
如果我用div包装该锚点并在那里指定“rootviewModel”控制器，则会写入日志消息。嗯 - 某事告诉我它与范围有关吗？

<div data-ng-controller="rootViewModel">
    <input type="button" ng-click="ToggleEditor2()" value="test me" />
</div>

Answer 1

<强>问题

$ scope的一个常见问题是，当使用任何类型的嵌套控制器或模块时，您的$ scope可以相互踩踏并导致您遇到的问题。

解决方案

使用Angular＆＃34; Controller As＆＃34;语法是此问题的推荐解决方案。它允许您创建同一控制器的多个实例，同时为每个实例定义和维护唯一的范围。

This Article是我用来理解和实现这种新语法的一个很好的资源。

没有从ng-click调用控制器功能

1 个答案: