将ngOptions绑定到范围之外的数组

Question

是否可以将ngOptions绑定到$scope之外的值？

我有一组枚举，会自动呈现为javascript。这些目前不是“角度域”的一部分，但我想将ngOptions绑定到其中一个数组，我不想手动将项目复制到范围内。

我想要这个的原因是因为我有一些自动渲染项目的HTML Helpers，所以我想要一个非常通用的解决方案而不需要向控制器添加大量代码。这可能吗？

var NS = NS || {};
NS.Sub  = NS.Sub || {};
// This is auto-generated:
NS.Sub.enums = {"deliveryStatus":[{"id":1,"label":"Delivered"},{"id":2,"label":"Expected"},{"id":4,"label":"Failed"}],"documentType":[{"id":0,"label":"Pdf"},{"id":1,"label":"Rtf"}]};


var myApp = angular.module('myApp',[]);

function MyCtrl($scope) {
    // If I copy the items to the scope it works.
    $scope.items = NS.Sub.enums.deliveryStatus;
    $scope.model = {}
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app>
  <div ng-controller="MyCtrl">
    <p>Not working SELECT (bound to array outside of scope)</p>
    <select ng-model="model.status" ng-options="item.label for item in NS.Sub.enums.deliveryStatus"></select>
  
    <p>Working SELECT (bound to array inside scope)</p>
    <select ng-model="model.status" ng-options="item.label for item in items"></select>
  </div>
</div>

Answer 1

DEMO
您可以将NS附加到$rootScope，然后您可以直接在任何控制器上使用它NS

app.controller('MainController', function($rootScope){

    var vm = this;
    var NS = { Sub: { } };
    //you just need to do this once
    NS.Sub.enums = {"deliveryStatus":[{"id":1,"label":"Delivered"},{"id":2,"label":"Expected"},{"id":4,"label":"Failed"}],"documentType":[{"id":0,"label":"Pdf"},{"id":1,"label":"Rtf"}]};
    $rootScope.NS = NS;
});

只需像

一样使用它

<select ng-model="model.status" ng-options="item.label for item in NS.Sub.enums.deliveryStatus"></select>

Answer 2

在许多应用程序中，有一个初始化阶段可以加载必要的资产（例如txt文件，权限，配置等）。在我的应用程序中，我们在引导Angular之前加载config.txt。所以顺序是这样的：

1。使用XmlHttpRequest获取config.txt

var client = new XMLHttpRequest();
client.open( 'GET', './version.txt' );

2。 onLoad解析txt文件，为values obj

赋值

client.onLoad( function(){
    values = parse(client.responseText); //you'll have to define this

    bootstrapTheApp()
}

3。定义一个角度.value，用于存储角度域

 angular.module( 'app', [] )
 .value( 'values', values )

4。引导您的应用

 bootstrapTheApp = function(){
     var ns = 'app' //this is basically the same thing as declaring `ng-app="app"` in your index.html
     angular.bootstrap( document, [ ns ] )
 }

然后在您的控制器中，您可以像注射任何其他注射剂一样注入值。

.controller( 'myController', function( $scope, values ){ 
     $scope.options = values.options
}

现在看起来有点奇怪，你必须根据你需要的顺序根据你需要的逻辑来安排它。但是这允许你在之前做一些事情开始它的配置/声明阶段，这通常在你的角度脚本加载时发生。这只会延迟，直到你准备好。