在渲染指令模板上从 db 加载值 [英] Load value from db on rendering directive template

问题描述

我陷入了一个疑问
我有 html:

<p class="ng-binding">{{mydata.postdata}}</p><div my-rating rating-value="rating" data-cat="post" data-id="mydata.id" ></div><div ng-repeat="mydata.personRelatedData 中的childData">{{childData.personName}}<div my-rating rating-value="rating" data-cat="person" data-id="childData .id" >

我有一个指令:

myDirectives.directive('myRating', function () {返回 {限制:'A'，模板:'<div><ul>'+'<li ng-repeat="i in getNumber(myNumber)" ng-click="toggle($index)" id=$index>'+'<div ng-switch="switchPoint<$index">'+'<div ng-switch-when=true><img ng-src="img/{{未评级}}"></div>'+'<div ng-switch-when=false><img ng-src="img/{{Rated}}"></div>'+' </div>'+'</li></ul></div>',范围: {评级值:'='，数据猫:'='，数据 ID: '=',只读: '@'，onRatingSelected: '&'},链接:函数(范围，元素，属性){scope.myNumber = 5;scope.getNumber = function(num) {返回新数组(数量)；}//如果 myId 存在于数组 tab[] 中，这是一个由评分数据的 id 组成的数组如果 (tab.indexOf(scope.myId+"") != -1) {console.log("数据库中的 ID !!!" + scope.dtId);db.transaction(函数(tx){//获取ID的评分值dt.ID}}scope.toggle= 函数(val){scope.ratingValue = val + 1;scope.onRatingSelected({rating: null});scope.switchPoint = val;}}}}

现在我在这里尝试的是，在加载评级模板时，我检查具有该 ID 的数据是否存在于 db 中，如果存在，则在加载评级模板时呈现该评级.但这不起作用.

控制台显示:

数据库中的ID！！！: ABC数据库中的 ID ！！！: 防御数据库中的 ID ！！！: GHI将切换点设置为 2将切换点设置为 5将切换点设置为 4

结果是我在页面加载时评分的评分模板确实得到评分，但达到最大值.虽然未评级的很好.

解决方案

我最终通过以下方式解决了:
* 将数据库事务移动到控制器并在页面加载时在数组中获得评级值(在 html 正文中声明控制器)
* 使用此数组在指令中比较和设置评级值.因此没有异步调用问题

I am stuck in a doubt
I have html :

<div ng-repeat="mydata in data" class="ng-scope ng-binding">

   <p class="ng-binding">{{mydata.postdata}}</p> 
   <div my-rating rating-value="rating" data-cat="post" data-id="mydata.id" ></div>

   <div ng-repeat="childData in mydata.personRelatedData">
          {{childData.personName}}  
          <div my-rating rating-value="rating" data-cat="person" data-id="childData .id" >
   </div>
</div>

I have a Directive :

myDirectives.directive('myRating', function () {
  return {
    restrict: 'A',
    template: '<div><ul>' +
      '<li ng-repeat="i in getNumber(myNumber)" ng-click="toggle($index)" id=$index>' +
      '<div ng-switch="switchPoint<$index">'+
      '<div ng-switch-when=true><img ng-src="img/{{Unrated}}"></div>'+
      '<div ng-switch-when=false><img ng-src="img/{{Rated}}"></div>'+
      ' </div>' +
      '</li></ul></div>',

    scope: {
      ratingValue: '=',         
        dataCat: '=',  
        dataId: '=',  
      readonly: '@',
      onRatingSelected: '&'     
    },
    link: function (scope, elem, attrs) {       
      scope.myNumber = 5;       
      scope.getNumber = function(num) {
            return new Array(num);   
      }     

      // if myId exists in array tab[], which is  an array consisting of rated datas' ids      
      if (tab.indexOf(scope.myId+"") != -1) {
      console.log("ID in DB !!!" + scope.dtId);          
  db.transaction(function (tx) {
        //get Rating value of ID dt.ID
    }              
      }

      scope.toggle= function(val) {
        scope.ratingValue = val + 1;          
        scope.onRatingSelected({rating: null});
        scope.switchPoint = val;                    
      } 
    }
  }
}

Now what I am trying here is that on load of a rating template, i check whether the data with that ID exists in db, and if it does, then render that rating on load of the rating template. But this is not working.

Console Shows :

ID in DB !!! : ABC
ID in DB !!! : DEF
ID in DB !!! : GHI
Setting Switch Point to 2
Setting Switch Point to 5
Setting Switch Point to 4

The result is that the rating templates that I have rated, on page load do get rated, but to the max value. While the unrated ones are fine.

解决方案

I finally solved it by following :
* Moved DB transaction to a controller and got rating values in an array on page-load (declared controller in body of html)
* Used this array to compare and set rating values in directive. Thus no async calls issue

这篇关于在渲染指令模板上从 db 加载值的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！