很难在AngularJS中从父级继承范围

时间:2014-04-30 12:51:38

标签: angularjs angularjs-scope

所以我有以下两个控制器,一个父节点和一个子节点,我需要一个动态添加到传递给子作用域的父作用域的值。我真的无法理解服务注入是如何工作的。这是我的父控制器:

'use strict';

angular.module("myApp").controller("singleTopicController", ["RestFullResponse", "Restangular", "localStorageService", "$scope", "$window", "$stateParams", function(RestFullResponse, Restangular, localStorageService, $scope, $window, $stateParams){

  var topics = Restangular.one('topics', $stateParams.id);

  var Topics = topics.get({},{"Authorization" : localStorageService.get('***')}).then(function(topic){
    $scope.topic = topic;
    $scope.topic.id = topic.id;
    $window.document.title = 'Example | ' + $scope.topic.topic_title;

    console.log($scope.topic);
  });

}]);

我的子控制器需要topic.id才能工作。

'use strict';

angular.module("myApp").controller("commentSingleController", ["RestFullResponse", "Restangular", "localStorageService", "$scope", "$state", "$stateParams", "$timeout", function(RestFullResponse, Restangular, localStorageService, $scope, $state, $stateParams, $timeout){

  $scope.topic = {};

  var oneTopic = Restangular.one('topics', $scope.topic.id);
      oneTopic.get({}, {"Authorization" : localStorageService.get('***')}).then(function(topic) {
        topic.getList('comments', {}, {"Authorization" : localStorageService.get('***')}).then(function(comments){
          $scope.comments = comments;
          console.log($scope.comments);
        });
      });

      $scope.isCollapsed = true;

      var comments = Restangular.all('comments');

      $scope.commentData = {
        //topic_id: $scope.parent.topic.id
      };

      $scope.postComment = function(mood) {
        $scope.commentData.mood = mood;
        comments.post($scope.commentData, {}, {"Authorization" : localStorageService.get('***')}).then(function(response){
          $state.transitionTo($state.current, $stateParams, {
            reload: true,
            inherit: false,
            notify: true
          });
        }, function(response){
          $scope.error = response.data.message;
        })
      };

}]);

如果我添加

console.dir($scope.$parent);

到子控制器,主题显然在那里。

enter image description here

但如果我尝试

console.dir($scope.$parent.topic);

我未定义。

我尝试在观察者中包装子控制器的Restangular.get()但是没有做任何事情。

$scope.$watch('topic', function{

Restangular.one()...})

我在哪里错了。

<div class="main-left-column">
  **<div ng-controller="singleTopicController">** //my main controller

      <div class="topic-full">
        <div class="topic-left">
          <div class="topic-left-inner">
            <a ui-sref="main.topic({id: topic.id})"><h4>{{ topic.topic_title }}</h4></a>
            <hr>
            <img ng-src="{{ topic.image_url }}" class="img-responsive img-topic" tooltip="{{ topic.topic_title}}"/>
            <hr ng-if="topic.image_url">
            <p>{{ topic.topic_content }}</p>
          </div>
        </div>
        <div class="topic-right">
          **<div class="topic-right-inner" ng-controller="commentSingleController">** //child controller
            <img ng-src="{{ topic.profile_pic }}" width="60px" class="profile-pic"/>
            <div class="topic-data">
              <h4 class="topic-data">{{ topic.author_name }}</h4>
              <h5 class="topic-data">- posted on {{ topic.created_at }}</h5>
            </div>
            <div class="comment-count">
              <div class="comment-count-mood red" tooltip="Negative comments"><p>{{ topic.comments_angry }}</p></div>
              <div class="comment-count-mood yellow" tooltip="Neutral comments"><p>{{ topic.comments_sad }}</p></div>
              <div class="comment-count-mood green" tooltip="Positive comments"><p>{{ topic.comments_happy }}</p></div>
            </div>
            <div class="clear"></div>

            <hr>
            <p ng-if="comments.length == 0">No comments</p>
            <div class="line-through">
              <div ng-repeat="comment in comments">
                <div class="comment-left">
                  <img ng-src="{{ comment.profile_pic }}" width="40px" class="comment-pic"/>
                  <div class="comment-mood" ng-class="{'red': comment.mood == 2, 'yellow': comment.mood == 1, 'green': comment.mood == 0}"></div>
                </div>
                <div class="comment-right">
                  <h4 class="comment-data">{{ comment.author_name }}</h4>
                  <p>{{ comment.comment }}</p>
                </div>
                <div class="clear"></div>
                <hr class="dotted" ng-if="!$last">
              </div>
            </div>
          </div>
        </div>
        <div class="clear"></div>
      </div>

  </div>
</div>

更新:添加了HTML。控制器包装器用星号表示。

1 个答案:

答案 0 :(得分:1)

您的主题不会被创建,直到您的父控制器中的.get结算,这可能是在初始化子控制器之后。

如果您从子控制器中删除$scope.topic = {}并为$watch添加topic.id,则应该可以在其中使用该ID。

你真的不应该需要$ scope。$ parent作为$ scope应该拥有父母所做的一切,除非它被子范围内的某些东西隐藏或者它是一个孤立的范围。方式(在这种情况下没有)。