相关疑难解决方法(0)

在为项目评估AngularJS时,我注意到其文档中的以下段落:

游戏和GUI编辑器是非常密集和棘手的DOM操作的例子.这些类型的应用程序与CRUD应用程序不同,因此不适合Angular.在这些情况下,使用更接近裸机的东西(如jQuery)可能更合适.

但是文档继续没有真正解释为什么会这样.为了对我们为项目使用什么技术做出明智的决定,我想更好地了解这个陈述的来源以及它背后的事实.

有什么具体的问题会妨碍有人试图建立如插图工具,或视频编辑套件,在AngularJS？

我正在开发一个angularjs应用程序作为我的angularjs学习的一部分.我有控制器,从那里我打电话给服务层.

leagueManager.service("teamsService", function($http){
    var teams = {};
        $http.get('data/teams.json').then(function(data) {
        teams = data;
    });
    this.getTeams = function(){
        return teams;
    };

});

我注意到由于$ http.get.then的异步性质,数据不会立即被检索,因此当我从控制器(teamsController)调用getTeams()时,我不会得到"团队",我会得到没有.

不知道如何解决这个问题？

第二次尝试: 在阅读下面的帖子建议的关于延迟和角度承诺之后,我尝试了以下但它仍然没有效果.我的变量团队没有按照我想要的方式进行填充,之后填充它们并且在我的UI中没有帮助:

我的控制器 teamController.js

leagueManager.controller('teamsController', function($scope, $location, teamsService, $routeParams){
//init function to initialize data when controller is called everytime.
var init = function(){
        $scope.teams = [];
        var promise = teamsService.getTeams();
        promise.then(
        function(data){
            console.log("teams after promise:="+data);
            $scope.teams = data;
        }
        ,function(reason)
        {
                alert('Failed: ' + reason);
        }
        );
        console.log("teams in the scope:="+$scope.teams);
};

init();
});

这是我的 …

我一直试图找出解决方案,但我认为我走到了尽头.

所以这是我的指示

directives.directive('postprocess', function($compile)
{
    return {
        restrict : 'E',
        require: '^ngModel',
        scope: {
            ngModel: '='
        },
        link: function(scope, element, attrs) {
            var parsed = scope.ngModel;
            el = $compile(parsed)(scope);
            element.html("");
            //add some other html entities/styles.
            element.append(el);
            console.log(parsed);
        }  
    };
});

HTML

<postprocess ng-model="some_model.its_property" style="padding-top: 10px;" />

在控制器的某个地方,我更新了model属性

some_model.its_property = 'Holla';

但它不会更新相应的指令.它在加载时工作得很好,这告诉我它可能不完全是一个范围问题.

我有以下代码,也可以在http://jsfiddle.net/garukun/u69PT/上摆弄.

视图:

<div data-ng-app="testApp">
    <div data-ng-controller="testCtrl">
        <strong>{{pkey}}</strong>
        <span data-test-directive data-parent-item="pkey" 
            data-parent-update="update(pkey)"></span>
    </div>
</div>

JS:

var testApp = angular.module('testApp', []);

testApp.directive('testDirective', function ($timeout) {
    return {
        scope: {
            key: '=parentItem',
            parentUpdate: '&'
        },
        replace: true,
        template: '<div><p>{{key}}</p>' +
            '<button data-ng-click="lock()">Lock</button>' +
            '</div>',
        controller: function ($scope, $element, $attrs) {
            $scope.lock = function () {
                $scope.key = 'D+' + $scope.key;
                console.log('DIR :', $scope.key);

                // Expecting $scope.$parent.pkey to have also been
                // updated before invoking the next line.
                $scope.parentUpdate();
                // $timeout($scope.parentUpdate); // …

在AngularJS中,如何$ watch $ scope变量并使用它来更新另一个变量是很简单的.但是,如果两个范围变量需要相互观察,那么最佳实践是什么？

我有一个双向转换器,将华氏温度转换为摄氏温度,反之亦然.如果你在华氏度中键入"1",它会正常工作,但尝试"1.1"并且Angular会在覆盖你刚刚输入的华氏度之前稍微反弹一下(1.1000000000000014):

function TemperatureConverterCtrl($scope) {
  $scope.$watch('fahrenheit', function(value) {
    $scope.celsius = (value - 32) * 5.0/9.0;
  });
  $scope.$watch('celsius', function(value) {
    $scope.fahrenheit = value * 9.0 / 5.0 + 32;
  });
}

这是一个吸烟者:http://plnkr.co/edit/1fULXjx7MyAHjvjHfV1j？p = preview

有哪些不同的可能方法可以阻止Angular"弹跳"并强制它使用您按原样键入的值,例如使用格式化程序或解析器(或任何其他技巧)？

我有以下代码

<table>
 <thead><td>Id</td><td>Name</td><td>Ratings</td></thead>
 <tbody>
   <tr ng-repeat="user in users">
    <td>{{user.id}}</td>
    <td>{{user.name}}</td>
    <td><div ng-repeat="item in items">{{item.rating}}</div></td>
   </tr>
 </tbody>
</table>

users是一个只有id和name的用户对象数组.数组中的用户对象数 - 150

items是一个只有id和rating的项目对象数组.数组中的项目对象数 - 150

当我在浏览器中渲染它时,当我尝试在我的chrome中进行分析时,它需要大约250MB的堆内存 - v23.0.1271.95.

我正在使用AngularJS v1.0.3.

有角度的问题还是我在这里做错了什么？

这是JS小提琴

http://jsfiddle.net/JSWorld/WqSGR/5/

我最近一直在研究诸如Angular和Meteor之类的JavaScript框架,我想知道他们如何知道对象属性何时发生了变化,以便他们可以更新DOM.

我有点惊讶Angular使用普通的旧JS对象,而不是要求你调用某种getter/setter,以便它可以挂钩并进行必要的更新.我的理解是他们只是定期轮询对象以进行更改.

但随着JS 1.8.5中getter和setter的出现,我们可以做得更好,不是吗？

作为一个小概念证明,我把这个脚本放在一起:

(编辑:更新代码以添加依赖属性/方法支持)

function dependentProperty(callback, deps) {
    callback.__dependencies__ = deps;
    return callback;
}

var person = {
    firstName: 'Ryan',
    lastName: 'Gosling',
    fullName: dependentProperty(function() {
        return person.firstName + ' ' + person.lastName;
    }, ['firstName','lastName'])
};

function observable(obj) {
    if (!obj.__properties__) Object.defineProperty(obj, '__properties__', {
        __proto__: null,
        configurable: false,
        enumerable: false,
        value: {},
        writable: false
    });
    for (var prop in obj) {
        if (obj.hasOwnProperty(prop)) {
            if(!obj.__properties__[prop]) obj.__properties__[prop] = {
                value: null,
                dependents: {},
                listeners: []
            }; …

我在输入元素中使用了"ng-model",并使用chrome检查器观察了该元素.但是input元素的每个onxxx属性(包括onchange)都是null.然后,AngularJS如何捕获用户输入触发的"onchange"事件？

我仍然遇到同样的问题,ng-repeat中的过滤器和函数被称为所有该死的时间.

这里的示例,http://plnkr.co/edit/G8INkfGZxMgTvPAftJ91？p = preview,无论何时在单行上更改内容,someFilter过滤器都会被调用1000次.

显然这是因为子范围的任何更改都会冒泡到其父级,导致$ digest运行,导致所有过滤器运行(/sf/answers/1115545371/).是对的吗？如何在我的特定情况下防止它发生？

如何才能使其仅在已更改的项目上运行？

在我的实际用例中,即使在ng-repeat的项目上没有更改,也会调用过滤器,它是如此毫无意义,实际上会导致性能问题.

//编辑清除了来自探测器的所有不必要的东西 http://plnkr.co/edit/G8INkfGZxMgTvPAftJ91?p=preview

在学习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: ' + …