停止Angular JS ng视图擦除页面

Stop Angular JS ng-view from wiping the page out

本文关键字：擦除 视图 ng Angular JS 停止      更新时间：2023-09-26

好吧，我需要能够阻止ng-view擦除内容，我需要在那里有ng视图，因为这是它唯一不会（也不能）破坏整个应用程序的地方。

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

有什么方法可以阻止这种默认行为吗？

另一种（也许更好的*）方法是使用指令获取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/

*)我自己对棱角分明还很陌生，所以我对棱角分明的心态还不够深入，不知道做这些事情是否完全"合适"。

这里有一个选项，用<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' });
});

可能有一个更好的解决方案，但我需要在这方面做更多的工作。

这将是一个更好的解决方案，结合@towr和另一个问题的解决方案

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'
    });
});

不要忘记在指令上设置超过400的优先级，因为ng视图的执行优先级为：400

示例：

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