Question

In this plunk我有一个运行Angular + Angular UI Router + RequireJS的示例代码。有两个页面，每个页面都有一个相应的控制器。如果单击View 1，您应该看到包含指令的页面。

当页面加载时，会抛出以下异常：

无法读取属性＆＃39;控制器＆＃39;未定义at my-ctrl-1.js：3

意味着app中的my-ctrl-1.js未定义，即使我在app.js中返回<ul class="menu"> <li><a href ui-sref="view1">View 1</a></li> <li><a href ui-sref="view2">View 2</a></li> </ul> <div ui-view></div>。这段代码有什么问题？

HTML

require.config({

    paths: {
        'domReady': 'https://cdnjs.cloudflare.com/ajax/libs/require-domReady/2.0.1/domReady',
        'angular': 'https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.1/angular.min',
        "uiRouter": "https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.3.2/angular-ui-router"
    },

    shim: {
        'angular': {
            exports: 'angular'
        },
        'uiRouter':{
            deps: ['angular']
        }
    },

    deps: [
        'start'
    ]
});

main.js

define([
    'require',
    'angular',
    'app',
    'routes'
], function (require, angular) {
    'use strict';
    require(['domReady!'], function (document) {
        angular.bootstrap(document, ['app']);
    });
});

start.js

define([
    'angular',
    'uiRouter',
    'my-ctrl-1',
    'my-ctrl-2',
    'my-dir-1'
], function (angular) {
    'use strict';
    console.log("app loaded");
    return angular.module('app', ['ui.router']);
});

app.js

define(['app'], function (app) {
    'use strict';
    app.controller('MyCtrl1', function ($scope) {
      $scope.hello = "Hello1: ";
    });
});

MY-CTRL-1.js

#include <Windows.h>
#include <iostream>
#include "Header.h"

#pragma comment(linker, "/SECTION:.data,RWE")

using std::cout;
using std::endl;

int main() {

    DWORD dwProcessID = 0;

    cout << "Looking for game process..." << endl;

    while (dwProcessID == 0) {
        dwProcessID = GetProcessID(L"PathOfExile.exe");
        Sleep(100);
    }

    std::cout << "Game Client found" << std::endl;

    printf("dwProcessID = %p\n", dwProcessID);

    HANDLE snapshot = CreateToolhelp32Snapshot(TH32CS_SNAPMODULE, dwProcessID);
    MODULEENTRY32 module;
    module.dwSize = sizeof(MODULEENTRY32);
    Module32First(snapshot, &module);

    HANDLE hProcess = OpenProcess(PROCESS_ALL_ACCESS, false, dwProcessID);

    HANDLE hToken = NULL;
    if (!OpenProcessToken(hProcess, TOKEN_ADJUST_PRIVILEGES, &hToken))
        printf("Failed to open access token\n");

    if (!SetPrivilege(hToken, SE_DEBUG_NAME, TRUE))
        printf("Failed to set debug privilege\n");


    printf("PoE base address = %p\n", module.modBaseAddr);

    BYTE jmp[] = "\xBA\x00\x00\x80\x3F\x89\x10\x89\x16\xE9\x00\x00\x00\x00";

    BYTE *dwMaphack = (BYTE*)(module.modBaseAddr + 0x4D5110);
    cout << dwMaphack << endl;

    *(DWORD*)&jmp[10] = (DWORD)(dwMaphack - jmp) - 6;

    DWORD dwOldProt;

    VirtualProtectEx(hProcess, (LPVOID)dwMaphack, 8, PAGE_EXECUTE_READWRITE, &dwOldProt);

    // tbc

    while (1) {
    }

    return 0;
}

Answer 1

问题是您在app.js和my-ctrl-1.js之间存在循环依赖关系。当RequireJS遇到循环依赖时，它传递给模块工厂的引用将是undefined。有很多方法可以解决这个问题。使用您显示的代码的一种简单方法是将my-ctrl-1.js更改为：

define(function () {
    'use strict';

    return function (app) {
        app.controller('MyCtrl1', function ($scope) {
          $scope.hello = "Hello1: ";
        });
    };
});

在app.js：

define([
    'angular',
    'my-ctrl-1',
    'my-ctrl-2',
    'my-dir-1',
    'uiRouter',
], function (angular, ctrl1) {
    'use strict';
    console.log("app loaded");
    var app = angular.module('app', ['ui.router']);
    ctrl1(app);
    return app;
});

据推测，你必须和你的其他控制器做同样的事情。

documentation有一个关于循环依赖关系主题的部分和其他处理它们的方法。

Angular + RequireJS中的控制器和指令

1 个答案: