Forms 形式：如何正确连接实时预览和控制器？（AngularJS）

像其他所有问过Angular JS这个问题的人一样，我的问题比简单的“如何修复下拉菜单中的空白选项”更深。基本上，我正在用我正在创建的表单创建一个实时预览。我的意思是：

HTML中的初始块引号基本上是将出现的实际评论。第二个blockquote是实际的实时预览。最后，第三部分是我面临的困境

困境： 以下是我面临的困境：

通过从选择标记中删除：ng model=“review.stars”，我的页面将按预期加载5颗星。但是，由于我需要绑定已经发布的收视率、实时预览和最初选择的5颗星，因此我必须使用ng model=“review.stars”将所有内容绑定在一起

但是，现在发生的事情是，通过在ng模型中添加ng controller=starscocontroller，整个过程根本不起作用。我尝试过使用一些公式（其中一个看起来很有希望，一个使用orderProp），但是因为我需要绑定前面提到的三个东西，它破坏了代码和特定部分

我仍然可以从列表中选择一个选项，但预览无法显示它。此外，它不会在下拉列表中自动显示第五星（我必须手动选择）

如果你想要一个视觉帮助来更好地理解我所解释的内容，让我发布一张我所指的两种情况的图片

HTML

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

        <form name="reviewForm">

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


            <select ng-model="review.stars" ng-controller="starsController" name="stars" id="stars">

                <option style="display:none" value=""></option>                          
                <optgroup label="Rate the product">
                   <option value="1 star" name="1 star">1 star</option>
                   <option value="2 stars" name="2 stars">2 stars</option>
                   <option value="3 stars" name="3 stars">3 stars</option>
                   <option value="4 stars" name="4 stars">4 stars</option>
                   <option value="5 stars" name="5 stars" selected="selected">5 stars
                   </option>
                </optgroup>
            </select>
            <br/>

要解决此问题，请将ng init=“review={}”添加到表单标记中

<form name="reviewForm" ng-init="review={}">

---

你能发一张便条吗？我怀疑这可能与您确定的optgroup有关。啊，我知道问题是什么。您的脚本不包括在内。如果您添加脚本，它应该会修复部分问题。@pixelbits是的，但是它们包含在正文中。我现在将它们包含在标题中。这解决了一个问题，但现在我仍然有一个可怕的问题，我从第一天开始就一直试图解决-选项一的空白选项。你能修复plunker中的脚本标记吗？一旦它开始工作，我可以看一看？我尝试使用指令函数，但我发现文档很糟糕（比如，如果他们解释了读者想知道的内容的一半）。无论如何，我知道我的新指令很糟糕，但我还是尝试了一下。我希望所有教程都像你的一样简单。我玩弄了你给我看的代码（30分钟左右），之后我能够完美地集成它。我会给出答案，但遗憾的是我没有足够的重复次数。太好了！

<form name="reviewForm" ng-init="review={}">

<form name="reviewForm" ng-controller="starsController">

app.directive('reviewStars', function() {...});