Question

我有这个指令，通过此应用程序中的categoryId引入子类别，这些类别称为服务，子类别称为services-child（仅供您知道）。

确定包含指令service-detail.php的文件包含：

<services-child serviceid="{{id}}"></services-child>

指令：

'use strict';
app.directive('servicesChild', function ($window,$state,servChildService) {
return {
    require: '^form',
    restrict: 'EA',
    scope: {
      serviceid: '@',
    },
    templateUrl:'assets/views/partials/service-child.php',
    link: function ($scope, $element, $attributes) {

        var serviceId = $attributes.serviceid;

        $scope.childs = servChildService;
        servChildService.loadServiceChilds(serviceId);
        $scope.serviceChilds = servChildService.serviceCH;

    }
};
});


app.factory('serviceChildResource', ['$resource', function($resource) {
return $resource("/services/serviceChild/:id", {id: '@id'}, {
    getChilds: {
        method: 'GET'
    }
});
}]);

app.service('servChildService', function(serviceChildResource) {

 var self = {
    'isLoading': false,
    'showBlock': true,
    'serviceCH': [],
    'loadServiceChilds': function(serviceId){

        if (!self.isLoading) {

            self.isLoading = true;
            var params = {
                'id': serviceId,
            };

            self.serviceCH = [];
            serviceChildResource.getChilds(params, function(data){

                if(data.childs.length > 0){
                    angular.forEach(data.childs, function(value, key){
                        self.serviceCH.push(new serviceChildResource(value));
                        self.isLoading = false;
                        self.showBlock = true;
                    });
                }else{
                    self.showBlock = false; 
                    self.isLoading = false; //show the loading.
                }

            });




        }

    }

 };

 return self;
 });

现在，services-child视图就是这个service-child.php：

<div class="panel panel-white" ng-show="childs.showBlock">
<div class="panel-heading border-light">
    <h4 class="panel-title"><span class="text-bold">Add More Services</span> 
    </h4>
</div>

<div class="table-responsive">

        <table class="table table-bordered table-hover" id="sample-table-1">
            <thead>
                <tr>
                    <th>Service</th>
                    <th>Description</th>
                    <th>Price</th>
                    <th>Qty.</th>
                    <th>Select</th>
                </tr>
            </thead>
            <tbody>
                <tr ng-repeat="service in serviceChilds">
                    <td>{{service.name}}</td>
                    <td ng-bind-html="service.description"> 
                        {{service.description}}
                    </td>
                    <td>${{service.price}}</td>
                    <td>
                        <qty-select ng-hide="{{service.single_service}}" 
                                    price="{{service.price}}"
                                    id="{{service.id}}"
                                    indexid = {{$index}}>
                        </qty-select>
                    </td>
                    <td><input type="checkbox" value="{{service.id}}" 
                        ng-model="$root.servCheck[service.id]" 
                                name="servCheckN"/></td>
                </tr>
            </tbody>
        </table>

    <div ng-show="childs.isLoading">
        <span us-spinner="{radius:10, width:5, length:4, lines:8}"></span>
    </div>
</div>
</div>

Ok现在在这个指令中，我有另一个具有Dynamic DropDown的指令：如你所见，这是指令：

<qty-select ng-hide="{{service.single_service}}" 
     price="{{service.price}}"
     id="{{service.id}}"
     indexid = {{$index}}>
</qty-select>

现在这个指令代码就是这个qty-select.js：

'use strict';
app.directive('qtySelect', function ($window,$state,servChildService,$localStorage,$rootScope,$timeout) {
return {
    require: '^form',
    restrict: 'EA',
    scope: {
      indexid: '@',
    },
    templateUrl:'assets/views/partials/qty-select.php',
    link: function ($scope, $element, $attributes) {

        var i = 1;

        while (i < 16) {
            $scope.selectObj.push({'value' : $attributes.price * i,  
                   'label' : i + ' (' + $attributes.price * i + ')', 
                   'price' : $attributes.price * i,
                   'qty'   : i,
            });
            i += 1;
        };


        console.log($rootScope.priceQty);

    }
};
});

所以这个指令基本上是创建一个select选项元素但它显示价格乘以指数Ex。 1（10美元）逐一递增防爆。 2（$ 20）所以结果是这样的：如果你在price属性中将10传递给它，它将显示：

<select ng-init="$parent.priceQty[indexid] = selectObj[0]" 
 ng-model="$parent.priceQty[indexid]" ng-change="updatePrice()" 
 ng-options="option.label for option in selectObj" 
 class="ng-valid ng-not-empty ng-dirty ng-valid-parse ng-touched" style="">
<option value="?"></option>
<option label="1 (15)" value="object:77">1 (15)</option>
<option label="2 (30)" value="object:78">2 (30)</option>
<option label="3 (45)" value="object:79">3 (45)</option>
<option label="4 (60)" value="object:80">4 (60)</option>
<option label="5 (75)" value="object:81">5 (75)</option>
<option label="6 (90)" value="object:82">6 (90)</option>
<option label="7 (105)" value="object:83">7 (105)</option>
<option label="8 (120)" value="object:84">8 (120)</option>
<option label="9 (135)" value="object:85">9 (135)</option>
</select>

现在一切正常但我不知道如何获得角度附加到dropDown的第一个空选项。

这是select qty-select.php

的View指令

<select ng-init="$root.priceQty[indexid] = selectObj[0]" 
    ng-model="$root.priceQty[indexid]" ng-change="updatePrice()" 
    ng-options="option.label for option in selectObj" >
</select>

<!-- <select ng-model="$root.priceQty[indexid]" ng-change="updatePrice(indexid)">
<option ng-repeat="value in selectObj" value="{{value.value}}" 
        ng-selected="$index == 1">{{value.label}}</option>
</select> -->

正如您在我尝试使用ng-repeat和ng-options时所看到的那样我两个都有问题。

现在如果我使用$ scope它可以工作，但是当我尝试使用root时它不起作用。

我注意到在我的视图中选择我已设置

<select ng-init="$root.priceQty[indexid] = selectObj[0]"

但是在填充的html中我看到了

<select ng-init="$parent.priceQty[indexid] = selectObj[0]"

$ parent为什么？正在改变它。

我需要在rootScope中设置这些输入，因为我必须提交表单，如果我没有将ng-model设置为发送到rootScope，我就无法访问这些值。

我也尝试在qty-select.js指令

中执行此操作

在我构建select元素后，我添加了这个：

$scope.priceQty = $scope.selectObj[0];

并且它有效但是当我使用$ rooScope时它不起作用，它表示未定义。

$rootScope.priceQty = $scope.selectObj[0];

任何想法？

谢谢

Answer 1

非常感谢您的反馈意见...... 我没有使用$rootScope并修复了空的问题。我有很多建筑错误，谢谢你的建议。我完全改变了使用指令的方式。

好的，我解决了空选项的方式是

'use strict';
app.directive('qtySelect', function ($window,$state,servChildService,$timeout,cartService,$cookies,$rootScope) {
return {
    require: '^form',
    restrict: 'EA',
    scope: {
      indexid: '@',
      serviId: '@id',
      servobj: '=',
    },
    templateUrl:'assets/views/partials/qty-select.php',
    link: function ($scope, $element, $attributes) {

        var i = 1;
        var index = 0;
        $scope.selectObj = [];
        $scope.cartArray = [];

        while (i < 16) {

            $scope.selectObj.push({'value' : $attributes.price * i, //the value of the option tag (obligatory) 
                                   'label' : i + ' (' + $attributes.price * i + ')', //the copy (obligatory) 
                                   'price' : $attributes.price * i,
                                   'qty'   : i,
                                   'serviceId' : $attributes.id,
                                   'index' : index,
                                });


            i += 1;
            index += 1;

        };

        $timeout(function() {
            document.getElementById("qty-"+$scope.indexid)[1].selected = true

            //add the attribute ng-checked to filter them later.
            document.getElementById("qty-"+$scope.indexid)[1].setAttribute("selected", 'selected');
        }, 10);






    }
};
});

我按ID定位元素，我正在添加超时因为第一个加载返回undefined似乎DOM没有准备好在那一点上添加一个超时，它给了它足够的时间让DOM准备好了。此外，我手动添加selected =“selected”属性，因为所选的true不会添加所选的属性，我需要它以后选择整个元素。

$timeout(function() {
            document.getElementById("qty-"+$scope.indexid)[1].selected = true

            //addinf manyally the attribute selected
            document.getElementById("qty-"+$scope.indexid)[1].setAttribute("selected", 'selected');
}, 10);

谢谢如果您有建议，欢迎。

这是html指令：

<select ng-model="priceQty" ng-change="updatePrice(indexid,serviId,this)" 
    name="priceQty" id="qty-{{indexid}}">

    <option ng-repeat="(key, value) in selectObj" value="{{value.price}}" 
            qty="{{$index+1}}" service-id="{{serviId}}">
        {{$index+1}} ({{value.price}}) 
    </option>

</select>

AngularJS删除指令

1 个答案: