Question

好的，我需要能够阻止ng-view擦除内容，我需要在那里使用ng-view，因为它是唯一的地方，它不会（而且不能）核对整个申请。

我内部有一个滚动条，但是当一个人进行搜索时内容会发生变化（应用程序的整个点就是搜索），但只是加载页面Angular会清空ng-view。

任何阻止默认行为的方法？

Answer 1

另一种（也许更好的*）方法是使用指令获取ng-view的内容，并在编译（并清除）之前将其存储为模板。

angular.module('myApp', ['ngRoute'])
.directive('foo', ['$templateCache', function($templateCache)
{
    return {
        restrict: 'A',
        compile:  function (element)
        {
            $templateCache.put('bar.html', element.html());
        }
    };
}])
.config(function($routeProvider, $locationProvider) 
{
    $routeProvider.when('/', { templateUrl: 'bar.html' });
});

这样您就不需要在脚本标记中包含ng-view的内容。

<div ng-app="myApp">    
    <div foo ng-view>
        <ul>
            <li> test1 </li>
            <li> test2 </li>
            <li> test3 </li>
            <li> test4 </li>
        </ul>
    </div>
</div>

http://jsfiddle.net/3Dmv4/

*）我自己的角度相当新，所以我在角度思维方面不够深入，不知道做这些事情是否完全“合适”。

Answer 2

这是一个选项，用<script type="text/ng-template">包装您的默认内容，然后通过默认路由将该模板加载到ng-view。

<强> HTML

<div ng-app="myApp">
    <div ng-view>
        <script id="bar.html" type="text/ng-template">
           <ul>
             <li> test1 </li>
             <li> test2 </li>
             <li> test3 </li>
             <li> test4 </li>
            </ul>
        </script>
    </div>
</div>

<强> JS

angular.module('myApp', ['ngRoute'], function($routeProvider, $locationProvider) 
{
    $routeProvider.when('/', { templateUrl: 'bar.html' });
});

可能有一个更好的解决方案，但我需要再多做一点。

Answer 3

结合@towr和Answer to another question

的解决方案将是一个更好的解决方案

angular.module('myApp', ['ngRoute'])
.directive('viewWithContent', ['$templateCache', function($templateCache)
{
    return {
        restrict: 'A',
        compile:  function (element)
        {
            $templateCache.put('initial-view.html', element.html());
        }
    };
}])
.config(function($routeProvider, $locationProvider) 
{
    var initialized = false;
    $routeProvider.when('/', {
        templateUrl: function(){
            if(initialized){ 
                return './views/route-url.html';
            }

            initialized = true;

            return 'initial-view.html';
        },
        controller: 'someController'
    });
});

Answer 4

不要忘记在指令上放置超过400的优先级，因为ng-view的执行优先级为：400

示例：

.directive('foo', ['$templateCache', function($templateCache){
return {
    restrict: 'A', 
    priority:500,
    compile:  function (element)
    {
        $templateCache.put('bar.html', element.html());
    }
};}])

停止Angular JS ng-view擦除页面

4 个答案: