相关疑难解决方法(0)

我花了几个小时尝试这个代码的微小变化,我不明白为什么一个工作,另一个不工作.

Here's the scenario: I'm trying to present a list of registered users (which I'm getting with a simple database query that returns just a few columns), then when one user's name is clicked on, I'll retrieve more information about that user from the database, and present it in a different view. At the moment, I'm doing this with regular <a> elements with an ng-click directive that sets a value called currentid. Elsewhere in my code, I use $watch() …

在学习Angular时,我正在创建一个可以缩放的简单图库.我最初的实现使用了一个简单的ng-repeat,但我很快发现,根据画廊的缩放,我想改变像url源(从小到大拇指)的东西,可能还有css上的字幕等.

<div class="photoHolder" ng-repeat="photo in photos | filter:{caption:query} | orderBy:orderProp" ng-attr-style="transition: .3s ease; width: {{thumbWidth}}px; height: {{thumbWidth}}px;">
    <div class="photoClass" data-id="{{photo.id}}" ng-attr-style="background-image:url({{zoomSize < 5 ? photo.thumb_url : photo.medium_url}})"></div>
    <div class="caption">{{photo.caption}}</div>
    <div class="caption">{{photo.date}}</div>
</div>

所以,我改用了一个更清洁的指令:

<gal-photo class="photoHolder" ng-repeat="photo in photos | filter:{caption:query} | orderBy:orderProp"/>  

但是我可以获得指令元素来响应缩放更改的唯一方法是将指针添加到元素链接内的缩放:

link: function(scope, element, attrs) {
    var image = new Image();
    scope.photo.url = scope.zoomSize < 5 ? scope.photo.thumb_url : scope.photo.medium_url;
    scope.$watch('thumbWidth', function() {
           scope.photo.url = scope.zoomSize < 5 ? scope.photo.thumb_url : scope.photo.medium_url;
        element.attr('style',  'transition: .3s; width: ' + …

嗨,我有下一个问题:

在我看来,我调用了一个函数prepareDynamicData(itemMenu);

<div ng-repeat="itemMenu in menuDetailsData.categories" class="headDetails fontH2">
            <div style="display: none">{{prepareDynamicData(itemMenu)}}</div>
            <a href="#" ng-show="dynamicData.expand">{{itemMenu.name}}</a>
            <div ng-repeat="cat in dynamicData.data">
                <p>{{cat.name}}</p>
                <div class="articles">
                    <div ng-repeat="art in cat.items" class="article">
                        <div class="price">
                            <div></div>
                            <span><i>?</i>{{art.price}}</span>
                        </div>
                        <div class="artDescr">
                            <span class="fontTitle">{{art.title}}</span>
                            <p class="fontDetails">{{art.description}}</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>

我知道顶循环只重复2次(验证),但函数prepareDynamicData(itemMenu)调用4次,不知道为什么!？这是我的控制器:

function MenuItemCtrl($scope, $routeParams, $http, $location, sharedData) {
if (sharedData.getMenuDetails() == null) {
    $location.path('/menu');
    return;
}
else {
    $scope.menu = sharedData.getMenu();
    $scope.menuDetailsData = sharedData.getMenuDetailsData($routeParams.itemId);
}

$scope.dynamicData = {
    data : new Array(),
    expand : false
};

$scope.prepareDynamicData = …

我是新手,angularjs并试图学习angularjs过滤器的概念.但在我的情况下,调用过滤器两次.我希望过滤器只运行一次,但它运行两次.不明白为什么会发生这种情况..

这是我的傻瓜 ......

在本文下面的讨论中,Renan Cakirerk评论说,根据Angular开发人员的说法,Angular UI性能可能会降低到2000个数据绑定对象之外.

这让我认真考虑用Angular追求我的非平凡应用程序是一个好主意.一个好的应用程序毕竟是一个快速的应用程序 我不想花几个月的时间来建造一些最终被咬的东西.

我有兴趣听听Angular 非平凡应用程序构建者的消息

• 人们成功用于处理性能下降的一般策略
• 基于我的要求和设计模式的具体策略(下)
• 我是否应该在项目的早期阶段完全放弃Angular以避免迫在眉睫的"停止"

等待可能的"ES6电源和性能Object.observe未来"和未来版本的风险太高,这可能会让开发人员对$apply/ $digest循环进行更细粒度的控制,从而$scope可以触发有限的脏检查"(Brian Frichette提到这些在同一个讨论中.)我想知道复杂的应用程序今天在v1.2.15上可以很快.

关于我的问题/解决方案的更多细节

我正在构建一个具有非常丰富功能的应用程序,其中每个对象(例如用户)具有许多可以对其执行的功能,例如将它们链接到其他用户,更改其属性,向其发送消息等.

该规范在此对象上有超过20个函数:可放置区域,上下文敏感的工具栏图标(例如,当您选择某些文本时,Word具有出现在鼠标附近的迷你工具栏的方式).

这些选项需要隐藏和显示基于某些鼠标操作,如悬停和拖动,并依赖于特定用户对象的状态(许多图标和拖放选项将在某些情况下显示而不是其他情况)

现在,我开始构建它的方法是将每个单独的图标和拖放区域,拖动句柄等作为单独的数据绑定元素与ng-show(或类似)键入我们的自定义业务逻辑.

例如

<user>
  <menuicon1 ng-show="business-logic1"/>
  <menuicon2 ng-show="business-logic2"/>
  <dropzone1 ng-show="business-logic3"/>
  <draghandle ng-show="business-logic4"/>
  <changessavedicon ng-show="business-logic5"/>
  .....
</user>

假设上面的2000理论极限是可怕的,那么20个自定义可显示的可隐藏位意味着100个用户(使用惊人的ng-repeat显示)是我的极限!也许显示100是愚蠢的,我可以通过过滤等攻击这个,但在我看来,除以20大大减少了我的对象"带宽".当老板希望增加10个功能时会发生什么？

如果我以jQuery方式执行此操作,我可能会根据需要构建和销毁许多图标和菜单项.每个悬停/拖动的响应性稍差,但至少应用程序可以按比例缩放对象的数量.

我正在尝试调试AngularJS网站以提高加载时间的性能.目前浏览器在第一次加载时冻结1-2秒而没有缓存.

通过阅读各种帖子,我了解到观察者通常是AngularJS应用程序中性能的最大问题.

这是batarang的截图:

但是,有多少观察者？7k~很多,但是太多了？

在Chrome控制台CPU配置文件中进行调试时,我很难搞清楚什么叫h-k-z.onload,以及除了少观察者之外如何提高性能:

我知道这是一个广泛的问题,但我正在寻找AngularJS的任何性能提示.

在以下示例中:

的test.html

<!DOCTYPE html>
<html ng-app ng-controller="AppController">
    <head>
        <script type="text/javascript"  src="angular.js"></script>
        <script type="text/javascript"  src="script1.js"></script>
    </head>
    <body>
        <div ng-include="'test1.html'"></div>
        {{testFn()}}
    </body>
</html>

test1.html

<div>{{testFn()}}</div>

script1.js

function AppController($scope) {
    $scope.testFn = function() {
        console.log("TestFn");
        return "test";
    }
}

发生fn testFn执行4次.我希望在控制台中只看到2个日志.甚至,如果我删除

<div ng-include="'test1.html'"></div>

有2个日志,而不仅仅是一个.我错了什么？

更新:

angular.js

// added console.log to original code
var ngBindDirective = ngDirective(function(scope, element, attr) {
  console.log("ngDirective", attr.ngBind);
  element.addClass('ng-binding').data('$binding', attr.ngBind);
  scope.$watch(attr.ngBind, function ngBindWatchAction(value) {
    console.log("ngDirective - scope.$watch", value);
    element.text(value == undefined ? '' : value);
  });
});

的test.html

<!DOCTYPE html> …

标题几乎是不言自明的。我想知道 AngularJS 如何“知道”模型中发生了某些变化以更新视图。

为了实现这一目标，它正在做什么。不会影响整体表现吗？

我有一个后端对象,我从服务器收到并发送到服务器.我向用户授予更改后端对象的权限.我想确定后端对象是否已从保存点更改.

我怎么识别它？

例如:我有一个名为的模块

app.controller('PanelCtrl', function($scope, $http) {
$scope.action = "";
$scope.selectedItem = "";
    $scope.compoundItem = [];

...

我有对象的复合项数组.我想知道是否有变化是否在基元中发生了变化以及是否在复合项中...

指令更新的范围变量不会反映在{{variable}}页面上的位置,但是当我这样做时它们会显示为更新console.log(scope).

<script>
    var demoApp = angular.module('demoApp', []);

    demoApp.controller('demoController', function demoController($scope) {
      $scope.myElementId ="abcd";
      $scope.updateVals = function() {
        $scope.myElementClass = "";
      };
    });

    demoApp.directive('demoSelect', function() {
      return {
        restrict: 'A',
        controller: 'demoController',
        link: function(scope, element, attrs, controller) {
          element.on("click", function(event) {
            event.stopImmediatePropagation();
            event.preventDefault();
            scope.ele = angular.element(event.target);
            angular.element(".selected").removeClass("selected");
            $(scope.ele).addClass("selected");
            var mm = $(scope.ele).get(0);
            scope.myElementId = $(scope.ele).attr("id");
            scope.myElementClass = $(scope.ele).attr("class");
            scope.myElementType = mm.tagName;
          });
        }
      };
    });
  </script>

这是它的plunker.我错过了什么？