范围中的范围未定义Angular

时间:2015-06-23 20:28:36

标签: javascript angularjs

我一直在处理这个问题。假设我有以下指令和控制器:

angular.module('LiveAPP.artist',[])
.controller('artistCtrl', ['$scope', '$http', '$location', 'dataFactory', '$routeParams', artistCtrl])

.directive("ratestar", function() {
    return {
        restrict: "E",
        template: "<div id='rateYo'></div>",
        link: function( scope, ele, attrs ) {
            console.log(scope.ratingInfo)
            if(scope.reviews === undefined){
              $rateYoMain = $(ele).rateYo({
                rating:3
              })
            } else {
            var $rateYo = $(ele).rateYo({
              starWidth: "20px",
              rating:scope.review.number_of_stars
            });
          }

        }
    };
})

function artistCtrl($scope, $http, $location, dataFactory, $routeParams){

    $scope.artistName = $routeParams.artistname;

    $scope.$watch( 'artistName', function( newValue, oldValue ) {
      dataFactory.checkDb( newValue ).then(function(dbData){
        if(dbData.data != "No data"){
          $scope.artistInfo = dbData.data[0];
          $scope.reviews = dbData.data[1];
          $scope.ratingInfo = dataFactory.avgReview($scope.reviews);
        } else{
          dataFactory.artistInfoAPIs(newValue);
        }
      })
    });

    $scope.$on('artist:updated', function(event, data){
      $scope.artistInfo = data;
    });


    $scope.ratingInfo = "12";

    $scope.artistInfo = {
      artist_name: dataFactory.artistInfo.artist_name,
      artist_genre: dataFactory.artistInfo.artist_genre,
      artist_imageurl: dataFactory.artistInfo.artist_imageurl,
      artist_bio: dataFactory.artistInfo.artist_bio
    };



}

关联的视图如下:

<div class="mainstar"><ratestar></ratestar></div>
<div class='reviews' ng-repeat="review in reviews"> 
  <ratestar class="reviewstars"></ratestar>
</div>

我在链接功能中遇到问题。当artistName更改时,会发送一个GET请求,该请求将发送到数据库,然后数据库将使用正确的数据进行响应。我关注的数据是在promise回调中分配给$scope.ratingInfo的数据。奇怪的是,当我在<div class="mainstar"><ratestar></ratestar></div>的链接函数中的console.log(scope.ratingInfo)而不是<ratestar></ratestar>中的ng-repeat时,这个数据是12。获得'12'是有道理的,因为这是我在实例化控制器时定义它的方式。理想情况下,我想在<ratestar></ratestar> ng-repeat MySqlCommand cmd; cmd = dbconnect.createCommand(); cmd.CommandText = "UPDATE tableName SET firstname=@firstname, lastname=@lastname where id=@id"; cmd.Parameters.AddWithValue("@id", idTxt.Text); cmd.Parameters.AddWithValue("@firstname", fName.Text); cmd.Parameters.AddWithValue("@lastname", lName.Text); cmd.ExecuteNonQuery(); 中查看数据的方式与我所看到的相同。我似乎无法弄清楚这一点。任何人都知道这里发生了什么?

1 个答案:

答案 0 :(得分:0)

你可以尝试一下吗?

<div class="mainstar"><ratestar ratingInfo="ratingInfo" review="review"></ratestar></div>
<div class='reviews' ng-repeat="review in reviews"> 
  <ratestar class="reviewstars" ratingInfo="ratingInfo" review="review"></ratestar>
</div>
.directive("ratestar", function() {
    return {
        restrict: "E",
        template: "<div id='rateYo'></div>",
        scope: {
           ratingInfo : '=ratingInfo',
           review: '=review'
        },
        link: function( scope, ele, attrs ) {
            console.log(scope.ratingInfo)
            if(scope.reviews === undefined){
              $rateYoMain = $(ele).rateYo({
                rating:3
              })
            } else {
            var $rateYo = $(ele).rateYo({
              starWidth: "20px",
              rating:scope.review.number_of_stars
            });
          }
        }
    };
});