Angularjs自定义指令

我正在创建一个名为“组合”的自定义指令。我传递给主控制器的选项，但是我需要从父控制器中选择值。Angularjs自定义指令

的情形：

渲染：

我有称为阵列$ scope.fields其中包含不同类型的控制要呈现给用户。我在这些数组循环检查绘制文本输入或组合。

绑定

的$ scope.fieldValues将同步从用户输入的数值。文本输入正在更改fieldValues [$ index] .value中的值。所以我可以通过指定相对索引来获得fieldValues的最终值。

的问题

我怎样才能绑定到其关联fieldValues [$指数]的组合。价值。或如何从父控制器中获取所选组合的选定项目。

<script type="text/javascript"> 
 
    angular.module('myApp', []) 
 

 
.controller('MyController', function ($scope) { 
 
    $scope.fields = [{ name: 'customers', type: 'combo' }, { name: 'Name', type: 'text' }, { name: 'country', type: 'combo' }] 
 
    $scope.fieldValues = [{ value: '' }, { value: '' }, { value: '' }]; 
 
    $scope.myItems = ['Item 1', 'Item 2']; 
 
    $scope.itemId = 1; 
 

 

 
    $scope.log = function() { 
 
     for (var i = 0; i < $scope.fieldValues.length; i++) { 
 
      if (!angular.isUndefined($scope.fieldValues[i].value)) 
 
       console.log($scope.fieldValues[i].value); 
 
     } 
 

 
    } 
 
}) 
 
    
 
    
 
.directive('combo', function() { 
 
    return { 
 
     restrict: 'AE', 
 
     template: '<div class="input-group"> <select ng-model="selectedItem" ng-change="changeEvent()" >' + 
 
        '<option ng-value="model" ng-repeat="model in items">{{model}}</option></select>' + 
 
        ' {{selectedItem}} </div>', 
 
     replace: true, 
 
     scope: { 
 
      items: '=', 
 
      defaultItem: '=', 
 
      changeEvent: '&' 
 
      
 
     }, 
 
     controller: function ($scope) { 
 

 
     }, 
 
     link: function (scope, element, attrs) { 
 

 
      scope.selectedItem = scope.items[scope.defaultItem]; 
 
      scope.changeEvent = function() { 
 
       //console.log("changed"); 
 
       console.log(scope.selectedItem); 
 
      } 
 
     } 
 
    }; 
 
}); 
 

 
    </script>

<body ng-app="myApp" ng-controller="MyController"> 
 
    <div ng-repeat="field in fields"> 
 
     <div ng-if="field.type == 'combo'"> 
 
      <strong>{{field.name}}</strong> 
 
      <div combo items="myItems" default-item="itemId"></div> 
 
     </div> 
 
     <div ng-if="field.type == 'text'"> 
 
      <strong>{{field.name}}</strong> 
 
      <input type="text" ng-model="fieldValues[$index].value" /> 
 
     </div> 
 
    </div> 
 

 
    <input type="button" value="log" ng-click="log()" /> 
 
</body>

来源

2015-12-10 Coding

这里是一个工作plunker与你想要的东西：http://plnkr.co/edit/TEh9kauHCVfCPSw552c9?p=preview

的事情是，你正在使用的指令的隔离范围，所以你应该通过fieldValues[$index].value它。

看看吧！

来源

2015-12-10 16:52:38

谢谢伊格纳西奥。 – Coding

有没有办法达到这个目的，但用ng-options而不是ng-repeat？ – CJLopez

Angularjs自定义指令

回答

相关问题