javascript - ng-model 在我的应用程序上不是双向的

Question

更新:显然在 View 中设置 Controller ，例如 ng-controller="SomethingController as Ctrl"然后在模型 ng-model="Ctrl.myModel" 中使用它作品。什么鬼？

我一直想实现 this specific directive在我的申请上。它只需要我将我的模型作为元素的属性 ng-model="myModel"它应该有效。我看到了它的工作示例，并且我也让它在 jsfiddle 上工作。

但是它不想在我的应用程序上工作。我已经通过 Bower 安装了，我已将所有文件包含在我的 index.html 中我还注入(inject)了它 angular.module('myApp', ['angular-input-stars']) .

现在的问题是，该模型在我的应用程序上只能以一种方式工作。 ng-model="myModel"使用myModel的值并设置了正确的星星数量，但是一旦我更改了星星(在指令中并通过指令)，该值就不会被发送回我的模型。

我检查了指令的代码，他们确实使用模型 Controller 设置了值:

function link(scope, element, attrs, ngModelCtrl) {
    //...

    scope.setValue = function (index, e) {
         //...
        ngModelCtrl.$setViewValue(scope.last_value);
    }    
}

即使该指令不包含在 return 中那scope: {ngModel: '='} ，这仍然适用于示例和 jsFiddle，即使我不太理解 $setViewValue (即使在研究之后)。

我认为这可能与我的应用程序的架构有关，但我不确定。该应用程序非常强大且结构良好，我无法显示它的代码(公司代码)，但我可以说出我们是如何构建它的:

|-- app.js (contains directive module, show bellow)
|-- index.html
|-- /modules
      |-- /something
            |-- /overview
                  |-- somethingController.js 
                      (included in index.html & loaded through directive)
                  |-- somethingDirective.js
                      (included in index.html & loaded through app.js module)
                  |-- somethingView.html
                      (loaded through directive)

app.js 代码:

var app = angular.module('myApp', [
    'angular-input-stars',
    'something.overview'
]);

somethingDirective.js:

var somethingOverview = angular.module('something.overview');

somethingOverview.directive('somethingOverviewDirective', function () {
    return {
        restrict: 'E',
        controller: 'SomethingOverviewController',
        templateUrl:     'modules/something/overview/somethingOverviewView.html',
        scope: {
            overview: '=overview',
            errors: '=errors'
        }
    };
});

somethingController.js:

var somethingOverview = angular.module('something.overview', []);

somethingOverview.controller('SomethingOverviewController', 
    ['$scope', function ($scope) {
        function init() {
            $scope.myModel = 5;
        }

        // ...

        init();
    }]);

somethingView.html:

<div>
    Rating: {{myModel}}
    <input-stars max="5" ng-model="myModel"></input-stars>
</div>

Answer 1

正如 @charlietfl 在评论中提到的，范围内的原始值直接是问题

没有 Controller 的代码:

<div ng-app="myApp">
    <h3>Greetings</h3>
    <div ng-controller="MyCtrl">
        Hello, {{name}}!

        <div>Rating: {{rating}}</div>

        <input-stars ng-model="rating.value" max="5"></input-stars> 
    </div>
</div>


app.controller("MyCtrl", ['$scope', function($scope) {
    $scope.rating = {
        value: 5
    };
    $scope.name = 'Superhero';

}]);

更新了 jsFiddle:

https://jsfiddle.net/14f05jdb/3/