Question

AngularJS还是新手，我试图将两个控制器组合在一起。

在我尝试执行此操作之前，已正确选择初始选定的下拉选项。就目前而言，我最初没有选择我自动选择的下拉选项。

它之所以没有，是因为我试图玩两个控制器。如果单独使用，旧的工作正常。这是正确选择初始下拉选项的选项。然后，有第二个（和更新的）ng控制器用于＆＃34;打印＆＃34;评论。该控制器基本上将打印的评论推送到网页上。

我尝试将该控制器添加到旧控制器中。我尝试单独使用该控制器并在我的表单中添加两个ng-controller。我尝试将下拉菜单放在一个单独的div中，然后甚至是li，然后尝试在其中添加自己的控制器。到目前为止......没有运气。

我还能尝试其他什么吗？

这是我的傻瓜 - 它不会打印出文字，但它会完成剩下的工作： http://embed.plnkr.co/tUTn4L02B57gV1V7psfk/preview

这些是具体部分：

HTML：

    <blockquote ng-repeat="review in product.reviews">
        <b>Stars: {{review.stars}}</b>
        <br/>
        {{review.body}}
        <br/>
        <cite>by:  {{review.author}}</cite>
    </blockquote>

    <form name="reviewForm" ng-controller="ReviewController as reviewCtrl" ng-submit="reviewCtrl.addReview(product)">

    <blockquote>
        <b> Stars: {{reviewCtrl.review.stars}}</b>
        <br/>
        <b> Review: {{reviewCtrl.review.body}}</b>
        <br/>
        <cite>by: {{reviewCtrl.review.author}}</cite>
    </blockquote>

    <my-stars controller="starsController" model="reviewCtrl.review.stars" style="margin-bottom:50px;margin-left:36px;width:350px;"></my-stars>

JS：

app.controller('starsController', ['$scope', function($scope) {
      $scope.review = {};
      $scope.review.stars = '5 stars';
  }])
  app.directive('myStars', function() {

    return {
      restrict: 'E',
      scope: { model: '=' },
      template: '<select ng-model="model" ng-options="option.name as option.value group by option.type for option in options"></select>',
      controller: function($scope) {
        $scope.options = [
            { name: '1 star', value: '1 star', type:"Rate the product" }, 
            { name: '2 stars', value: '2 stars', type:"Rate the product" }, 
            { name: '3 stars', value: '3 stars', type:"Rate the product" },
            { name: '4 stars', value: '4 stars', type:"Rate the product" },
            { name: '5 stars', value: '5 stars', type:"Rate the product" }
        ];
      }

    };

    /*
      this.review = {};

      this.addReview = function(product) {
          product.reviews.push(this.review);

          };
    */
  });



    app.controller("ReviewController", function() {
      this.review = {};

      this.addReview = function(product) {
          product.reviews.push(this.review);

          };

  });

Answer 1

scope: { model: '=' },

通过将此行添加到myStars指令，您将为其提供一个独立的范围。这意味着控制器的范围和指令范围之间不会共享任何数据。如果您想传递$scope.review.stars，则需要通过传递model

的方式传递它

给你的指令它自己的控制器如下：

<my-stars controller="starsController" model="reviewCtrl.review.stars" style="margin-bottom:50px;margin-left:36px;width:350px;"></my-stars>

有点奇怪并且违背指令控制器的目的。我会将starsController中的所有内容放入指令的控制器中，如下所示：

controller: function($scope) {
    $scope.model = $scope.model || '5 stars'; //default to 5 stars
    $scope.options = [
        { name: '1 star', value: '1 star', type:"Rate the product" }, 
        { name: '2 stars', value: '2 stars', type:"Rate the product" }, 
        { name: '3 stars', value: '3 stars', type:"Rate the product" },
        { name: '4 stars', value: '4 stars', type:"Rate the product" },
        { name: '5 stars', value: '5 stars', type:"Rate the product" }
    ];
 }

这应该可以解决你的问题。

Answer 2

首先，正如@WillIAM已经写过的那样，将控制器分配给指令元素是最简单的，而你已经在指令本身中声明了控制器。

此外，我没有看到您选择当前产品进行审核的任何代码。如果您希望使用默认的5 stars标记，请在填写此属性的情况下创建空白评论。

Fixed plunker

在同一表单中使用两个控制器，但代码失败（angularjs）

2 个答案: