Question

我正在使用一个名为Radiant UI的框架，这是一种将HTML5用户界面引入虚幻引擎4的方法。我尝试在我这样做的时候尝试一些现代的Javascript，所以我和＃39;在AngularJS中构建UI。

我对Angular的理解仍然相当薄弱，我对这里的最佳实践有点困惑。扩展在设置时会注入以下Javascript。

var RadiantUI;
if (!RadiantUI)
  RadiantUI = {};
(function() {
  RadiantUI.TriggerEvent = function() {
    native function TriggerEvent();
    return TriggerEvent(Array.prototype.slice.call(arguments));
  };
  RadiantUI.SetCallback = function(name, callback) {
    native function SetHook();
    return SetHook(name, callback);
  };
  RadiantUI.RemoveCallback = function(name) {
    native function RemoveHook();
    return RemoveHook(name);
  };
})();;

所以这只是将RadiantUI推送到全局命名空间。如果扩展始终存在，那就没问题了，但事实并非如此。在测试环境（Chrome）中，它不存在。只有在游戏引擎中运行时才会出现这种情况。结合全局变量的事实，意味着我想要封装它。

在上一次迭代中，我将它包装在AMD模块中，并且运行良好。像这样：

define([], function()
{
    if ("RadiantUI" in window)
    {
        console.log("RadiantUI in global scope already!");
        return window.RadiantUI;
    }

    var RadiantUI;
    if (!RadiantUI) {
        RadiantUI = {};
        RadiantUI.TriggerEvent = function() {}
        RadiantUI.SetCallback = function() {}
        RadiantUI.RemoveCallback = function() {}
    }

    console.log("Using fake RadiantUI bindings");

    return RadiantUI;
});

所以这就是我想要做的事情：

我希望将radiant作为依赖项添加到我的app / stateProvider并注入它，就像它在AMD中一样。如果扩展名不存在，则使用存根方法。什么是正确的方法？一个模块？服务提供商？

更新：这是使用给出答案的工作代码。

var myapp = angular.module('bsgcProtoApp', ['ui.router' ]);

myapp.value('radiant', window.RadiantUI || {
    TriggerEvent: function()
    {
        console.log("TriggerEvent called");

    },
    SetCallback: function(name, callback)
    {
        console.log("Setcallback called");

    },
    RemoveCallback: function(name)
    {
        console.log("RemoveCallback called");
    }
});

myapp.config(['$stateProvider', '$urlRouterProvider',  function($stateProvider, $urlRouterProvider )
{
    $urlRouterProvider.otherwise("/mainmenu");

    $stateProvider.state('mainmenu',
    {
        name: "mainmenu",
        url: "/mainmenu",
        templateUrl: 'templates/mainmenu.html',
        controller: ['$scope', 'radiant', function($scope, radiant)
        {
            $scope.tester = function()
            {
                radiant.TriggerEvent("DuderDude");
                console.log("Duder!");
            }               
        }],
    });
}]);

Answer 1

你可能有一个Angular模块或应用程序。为了这个答案，我们称之为MyApp。

现在你可以做到

MyApp.value("RadiantUI", window.RadiantUI || {
    TriggerEvent = function(){},
    //... more properties
});

现在要将此值作为控制器中的依赖项访问，例如，您可以执行此操作

MyApp.controller(["$scope", "RadiantUI", function($scope, RadiantUI){
    // ... controller code ...
}]);

在AngularJS代码中使用此扩展的正确方法是什么？

1 个答案: