Question

我有一个简单的angularjs控制器，它使用jquery在鼠标移过锚元素时将某些内容记录到控制台：

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>

在这里，一堆嵌套视图通过状态插入。这些视图有很多锚元素，但当鼠标移过它们时没有任何反应。为什么会这样？不应该将父州控制器扩展到子状态吗？谢谢你的帮助！

Answer 1

父子控制器中绑定到$ scope的数据可以在子状态中访问，因为如果我们访问子状态，父控制器总是会运行。在菜单控制器中，如果写入

$scope.name = 'XYZ'

可以使用$ scope.name在每个子控制器中访问此$ scope.name。

编辑：在你的MenuController中将此锚点绑定在这样的文档上，它将起作用

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

如何使用onmouseover将父状态控制器扩展到子状态？

1 个答案: