javascript - 如何将 onmouseover 的父状态 Controller 扩展到子状态？

Question

我有一个简单的 angularjs Controller ，它使用 jquery，当鼠标移到 anchor 元素上时将某些内容记录到控制台:

app.controller('MenuController', function() {
    $("a").on('mouseover', function (e) {
        console.log("mouser over a link");
    });
});

我正在使用 ui-router 来组织我的应用程序状态:

app.config(["$urlRouterProvider", "$stateProvider", function($urlRouterProvider, $stateProvider) {

    // For any unmatched url, redirect
    $urlRouterProvider
        .otherwise("/");

    $stateProvider
        .state('menu', {
            controller: "MenuController",
            controllerAs: "menuCtrl",
            templateUrl: "partials/menu.html"
        })
            .state('menu.menu', {
                url: '/',
                templateUrl: "partials/menu.menu.html"
            })
            .state('menu.difficulty', {
                url: '/difficulty',
                templateUrl: "partials/menu.difficulty.html",
                controller: "DifficultyController",
                controllerAs: "difCtrl"
            })
            .state('menu.settings', {
                url: "/settings",
                templateUrl: "partials/menu.settings.html"
            })
}]);

我的菜单基本 html 位于 menu.html 文件中:

<!-- view - menu -->
<div ui-view>
    <!-- nested views -->
</div>

这里通过状态插入一堆嵌套 View 。这些 View 有很多 anchor 元素，但当鼠标滑过它们时什么也没有发生。为什么会这样？父状态 Controller 不应该扩展到子状态吗？感谢您的帮助!

Answer 1

父 Controller 中绑定(bind)到 $scope 的数据可以在子状态中访问，因为如果我们访问子状态，父 Controller 始终运行。 在菜单 Controller 中，如果写则写

$scope.name = 'XYZ'

这个 $scope.name 可以在每个子 Controller 中使用 $scope.name 访问。

编辑: 在您的 MenuController 中将此 anchor 绑定(bind)到文档上，如下所示，它将起作用

app.controller('MenuController', function() {
  $(document).on('mouseover','a', function (e) {
    console.log("mouser over a link");
  });
});