Angular 主数据下拉的Js自定义指令

Question

Angular JS 新手，

我正在尝试使用来自 Web 服务的数据为下拉列表定义自定义指令。

现在尝试处理一些静态数据但无法正常工作。

app.directive("deviceBranch", function(){
    return {
        templateUrl : 'resources/view/template/device-branch-list.html',
        controller : function($scope) {
            $scope.listBranch = [{
                deviceBranchId:"id1",
                deviceBranchName:"value1"
            },{
                deviceBranchId:"id2",
                deviceBranchName:"value2"
            },{
                deviceBranchId:"id3",
                deviceBranchName:"valkue3"
            }]
        }
    }
});

在模板中添加了 "Select" -

ng-options="service.deviceBranchId as service.deviceBranchName for service in listBranch"

这就是我使用指令的方式

<device-branch></device-branch>

Select 已填充，但没有可用选项。

请协助。

Answer 1

看起来您只是在模板中缺少一个 ng-model。下面是工作示例的 link。

<select ng-options="service.deviceBranchId as service.deviceBranchName for service in listBranch" ng-model="selected"></select>

您还可以将 $http 注入指令以从网络服务获取数据。

app.directive("deviceBranch", function($http){
  return {
    templateUrl : 'device-branch-list.html',
    scope: {
      ngModel: '='
    },
    controller : function($scope) {
        $scope.listBranch = [{
            deviceBranchId:"id1",
            deviceBranchName:"value1"
        },{
            deviceBranchId:"id2",
            deviceBranchName:"value2"
        },{
            deviceBranchId:"id3",
            deviceBranchName:"valkue3"
        }]
    },
    link: function($scope, element, attrs){
      //var url = ""
      //$http.get(url).then(function(response){
      // $scope.listBranch = response;
      //})
    }
  }
});

这是模板（设备分支-list.html）：

<select ng-options="service.deviceBranchId as service.deviceBranchName for service in listBranch" ng-model="ngModel">

https://plnkr.co/edit/essg24GsrhSKwqXO578p?p=preview

Angular 主数据下拉的Js自定义指令

Angular Js custom directive for master data drop down

html

angularjs

angularjs-directive