AngularJS - 模态视图的范围问题

Question

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

我有一个控制器，它以这种方式调用模态视图（使用 AngularUI 模态视图）：

$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 步骤而导致的问题。这是我的指令：

.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)
}
])