使用AJAX调用未使用父更改更新子指令模型

Question

使用AJAX调用填充模型时，我的指令模型未接收父模型更改。应该注意的是，子更改会传递给父级。我已经看到其他问题接近这一点，但似乎没有一个问题成功解决了这个孩子没有收到父更新的问题，同时能够更新父母。

“ngModel”在指令中按需要注释，通过模板传入并成功填充AJAX调用。使用ngModel在指令范围内给出“ngModel”双向访问：'='我包括父html，子html和使用的angular directive + controller。我已经注释了每个用于解释用法以及包含带注释的日志。

提前感谢您的任何建议/指示/帮助。

define([ 'angular' ], function(angular) {
'use strict';

return angular.module('app', [])

    .controller('addDataCtrl', ['$scope', 'Data', 'User', '$location', '$routeParams', function($scope, Dataset, User, $location, $routeParams) {

        // log when data.testEnumeratedType is updated
        $scope.$watch('data.testEnumeratedType', function() {
            console.log("initialEnumeratedType has been updated to : ", $scope.data.testEnumeratedType);
        });

        // RESTful call for data
        if($routeParams.id) {
            $scope.data = Data.get({id: $routeParams.id});
        }
    }]);

    .directive('ngEnumTypeSelect', function() {
    return {
        restrict    : 'A',
        require     : 'ngModel',
        scope       : {
            ngEnumDomain    : '@', // bind scope's ngEnumDomain with ngEnumDomain 
                                   // value declared in enclosing template.
            ngModel         : '=',
        },

        templateUrl : 'selectEnumeratedTypes.html',

        link        : function(scope, element, attrs, ctrl) {
            scope.getEnumTypes(attrs.ngEnumDomain); 

            // update this child scope model with parent value.
            scope.$watch(ctrl, function() {
                scope.currentEnumType = ctrl.$viewValue;
                console.log("    Directive model changed to : ", scope.currentEnumType);
            });

            // update parent scope's model with selected value
            scope.$watch('currentEnumType', function (value) {
                console.log("    Setting parent model value to : ", value);
                ctrl.$setViewValue(value);
                console.log("    Parent model value is : ", ctrl.$viewValue);
            });
        },

        controller  : ['$scope', 'EnumeratedType', '$location', function($scope, EnumeratedType, location) {

            $scope.getEnumTypes = function(enumDomain) {
                $scope.enumTypes = [];
                EnumeratedType.getEnumTypes( { type : enumDomain }, function(enumType) {
                    var enumeratedValues = enumType.enumeratedValues;
                    for (var index = 0 ; index < enumeratedValues.length ; index++) {
                        $scope.enumTypes.push(enumeratedValues[index].value);
                    }
                });
            };

            $scope.updateCurrentEnum = function(enumType) {
                $scope.currentEnumType = enumType;
            };

        }],
    };
});

}）;

带注释的日志：

initialEnumeratedType has been updated to : undefined
    Directive model changed to :  undefined directives.js:140
// below AJAX call is made, parent model value is updated to Trials, 
// but change is not communicated to child directive.
initialEnumeratedType has been updated to : Trials 

// when value is selected, changed is propagated to parent.
Setting parent model value to : None Selected
Parent model value is : None Selected

HTML

<!-- Parent html -->

<!-- The value is populated below - meaning model is populated via RESTful call -->
<div class="form-group">
    <label for="imageName" class="col-sm-2 control-label"></label>
    <div class="col-sm-4"></div>
    <label for="testEnumeratedType" class="col-sm-2 control-label">Type As Stored</label>
    <div class="col-sm-4">
        <input type="text" class="form-control" id="testEnumeratedType" placeholder="{{dataset.testEnumeratedType}}" ng-model="dataset.testEnumeratedType">
    </div>
</div>

<!-- The value is not initially populated below - meaning the parent model is not updating child model -->
<div class="form-group">
    <label for="imageName" class="col-sm-2 control-label">Name</label>
    <div class="col-sm-4">
        <input type="text" class="form-control" id="imageName" placeholder="{{dataset.name}}" ng-model="dataset.name">
    </div>
    <label for="enumTypeSelect" class="col-sm-2 control-label">Type</label>
    <div style="padding-left: 30px" class="col-sm-4" id="enumTypeSelect" data-ng-enum-type-select="{{dataset.testEnumeratedType}}" data-ng-enum-domain="Type" ng-model="dataset.testEnumeratedType"></div>
</div>


<!-- Child html -->

<div class="row">

    <!-- Create dropdown with button and list values - 
         Display value {{currentEnumType}} is not being initially updated-->
    <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
        {{currentEnumType}} <span class="caret"/>
    </button>
    <ul class="dropdown-menu" role="menu">
        <li><a ng-click="updateCurrentEnum(enumType)">{{enumType="None Selected"}}</a></li>
        <li class="divider"></li>
        <li ng-repeat="enumType in enumTypes">
            <a ng-click="updateCurrentEnum(enumType)">{{enumType}}</a>
        </li>
    </ul>

</div>