Question

我看到很多关于这方面的问题，但找不到解决我问题的方法。出于某种原因，我的模态视图html中的ng-model不会根据它的视图控制器进行更新。

我有一个控制器以这种方式调用模态视图（using AngularUI modal view）：

$modal.open({
                templateUrl: "createNewFeedWizard.html",
                controller: 'NewFeedCtrl'
            });

在html文件中（也包含控制器的视图）：

        <div class="panel-body" data-ng-controller="NewFeedCtrl">
        <script type="text/ng-template" id="createNewFeedWizard.html">
            <div class="modal-header">
                <h3 style="color: #1c7ebb">Add New Feed</h3>
            </div>
            <div class="modal-body">
                <div data-ui-wizard-form>
                    <h1>RSS URL</h1>
                    <div class="text-center">
                        <div style="position: relative; top: 30%; left: 1%">
                            <span>Enter the RSS feed URL</span><br>
                            <input type="text" class="form-control" ng-model="newFeed.url">
                            <span class="help-block">Some help text goes here.</span>
                        </div>
                    </div>
                </div>
            </div>

        </script>
        </div>

我的模态视图控制器如下：

    .controller('NewFeedCtrl', [
    '$scope', '$location', '$routeParams', 'httpService', 'logger', 'FeedLoader',
    function($scope, $location, $routeParams, httpService, logger, FeedLoader) {

        $scope.newFeed = {
            name: '',
            url: 'http://',
            application_id: '',
            id: isNaN(parseInt($routeParams.feedId)) ? 0 : $routeParams.feedId,
            rssFeed: {}
        };
    }

所以我希望ng-model =“newFeed.url”会转换为“http：//”，但遗憾的是输入仍为空。

任何帮助将不胜感激。

修改

所以问题是由于我的一个指令 - data-ui-wizard-form - 为AngularJS启用Jquery steps引起的。这是我的指示：

.directive('uiWizardForm', function () {
return {
    link: function (scope, ele) {
        ele.steps(scope.wizardSettings)
    }
}
});

有关我应该在指令中添加什么以使其工作的任何想法？

Answer 1

不完全确定原因（并且会很乐意解释）但这解决了我的问题：

.directive('uiWizardForm', ['$compile', ($compile) ->
return {
    link: (scope, ele) ->
        ele.wrapInner('<div class="steps-wrapper">')
        steps = ele.children('.steps-wrapper').steps()
        $compile(steps)(scope)
}
])

AngularJS - 模态视图的范围问题

1 个答案: