相关疑难解决方法(0)

在我将更改添加到$ scope变量之后,我正在寻找一种执行代码的方法,在本例中为$ scope.results.我需要这样做,以便在它可以执行之前调用一些遗留代码,这些遗留代码要求项目在DOM中.

我的真实代码是触发AJAX调用,并更新范围变量以更新ui.所以我目前我的代码在推送到示波器后立即执行,但遗留代码失败,因为dom元素尚未可用.

我可以使用setTimeout()添加一个丑陋的延迟,但这并不能保证DOM真正准备就绪.

我的问题是,有什么方法可以绑定到"渲染"类似的事件？

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

myApp.controller("myController", ['$scope', function($scope){
    var resultsToLoad = [{id: 1, name: "one"},{id: 2, name: "two"},{id: 3, name: "three"}];
    $scope.results = [];

    $scope.loadResults = function(){
        for(var i=0; i < resultsToLoad.length; i++){
            $scope.results.push(resultsToLoad[i]);
        }
    }

    function doneAddingToDom(){
        // do something awesome like trigger a service call to log
    }
}]);
angular.bootstrap(document, ['myApp']);

链接到模拟代码:http://jsfiddle.net/acolchado/BhApF/5/

提前致谢!

我有一个简单的网站,它实现了jQuery,以便在Index.html顶部横幅中创建一些带有一些图像的Slider.

现在,我想使用AngularJS,所以我将HTML代码分解为单独的部分.

1. 头
2. 页脚
3. 顶级横幅

如果我在原始版本中运行Index.html(不应用AngularJS模式),那么我可以看到滑块工作正常.

在应用AngularJS模式时,我将顶部横幅HTML移动到部分html,然后将ng-view应用于顶部横幅最初所在的div.

var app = angular.module('website', ['ngRoute']);
app.config(function($routeProvider) {
    $routeProvider.
    when('/about',{templateUrl:'app/partials/about.html'}).
    when('/contact',{templateUrl:'app/partials/contact.html'}).
    otherwise({redirectTo:'/home',templateUrl:'app/partials/home.html'})
});

当我刷新页面滑块不工作时,渲染为简单的html没有任何jQuery效果,真是一团糟.

这个部分有一些jQuery插件,通常由document.ready激活.但是当角度载荷部分在ng视图中时,此事件不会触发.如何调用此事件来初始化jQuery插件？

有任何线索如何解决这个问题？

感谢任何帮助.

我是AngularJS的新手,我在将jQuery自定义内容滚动器实现到我的应用程序时遇到了问题.

当我使用Angular更新内容时,我需要更新滚动条,为此滚动条有一个update方法.我的问题是,我不知道在哪里调用它.内容的标记如下:

<div class="scroll-list nice-scrollbars">
    <ul class="gallery clearfix">
        <li class="extra-alt" ng-repeat="item in relatedItems.data">
            ...
        </li>
    </ul>
</div>

我试图在Angular的成功分支中调用update方法$http.post:

$scope.relatedItems = $http.post($scope.url, {
    'filterType': 'related', 'film': id
}).success(function() {
    $(".nice-scrollbars").mCustomScrollbar('update');
});

这不起作用,我认为是因为调用成功方法时,视图内容尚未更新(我可以使用alert函数看到它,关闭对话框后出现数据)

我能够使滚动条工作的唯一方法是使用滚动条的高级属性来观察内容中的更改(这些是传递给滚动条的选项):

var scrollbarOpts = {
    scrollButtons:{
        enable:true
    },
    advanced:{
        updateOnContentResize: true
        //@TODO: get rid of this, correctly find where to call update method
    }
}

这是不好的做法,因为这个选项会降低整个脚本的性能. 我想知道,根据需要调用更新DOM所需的jQuery方法的正确位置在哪里,或者如何在AngularJS中正确地查看更改？

我正在尝试使用Angular JS指令来居中div的内容.

这是模板的简化版本:

<div id="mosaic" class="span12 clearfix" s-center-content>
    <div ng-repeat="item in hits" id="{{item._id}}" >
    </div>
</div>

这是指令:

 module.directive('sCenterContent', function() {
    var refresh = function(element){
        var aWidth= element.innerWidth();
        var cWidth= element.children()[0].offsetWidth;
        var cHeight= element.children()[0].offsetHeight;
        var perRow= Math.floor(aWidth/cWidth);
        var margin=(aWidth-perRow*cWidth)/2;
        if(perRow==0){
            perRow=1;
        }
        var top=0;
        element.children().each(function(index, child){
            $(child).css('margin-left','0px');
            if((index % perRow)==0){
                $(child).css('margin-left',margin+'px');
            }
        });
    };
    return {
        link : function(scope, element, attrs) {
            $(window).resize(function(event){
                refresh(element);
            });
        }
    };
});

它基本上浮动一些内部div并为每行中的第一个div添加一个边距,因此内容居中.

调整浏览器大小时,这可以正常工作.当我尝试在初始化后进行刷新时出现问题.

我已尝试使用此问题中所见的帖子链接功能.预链接和后链接函数按预期顺序调用,但不会在具有s-center-content指令的elemenet的子节点被渲染之后调用.由于没有找到孩子,因此刷新调用失败.

如何打电话刷新以确保孩子们已被处理？

无法在Angular控制器的$ viewContentLoaded事件中调用jquery函数,这里是相同的代码.

$scope.$on('$viewContentLoaded', function() {
    jQuery.growlUI('Growl Notification', 'Saved Succesfully');
    jQuery('#category').tree()
    });

这里需要任何配置?? 我甚至试过noConflict(); var $ jq = jQuery.noConflict(); 它需要任何其他配置吗？

谢谢,阿卜杜勒

我有一个隐藏项目列表.我需要显示列表,然后只需单击一下滚动到其中一个.我在这里复制了代码:http://plnkr.co/edit/kp5dJZFYU3tZS6DiQUKz？p = preview

正如我在控制台中看到的那样,在项目可见之前调用scrollTop(),所以我认为ng-show不是即时的,这种方法是错误的.它的工作原理是延迟使用scrollTop(),但我不想这样做.

还有其他解决方案吗？

我正在尝试使用AngularJS来提供一个可切换的下拉列表,其中各种选项的选择将触发不同的列表.ng-switch看起来是正确的方式,但我的内心ng-model并没有约束力ng-switch.如果我不使用绑定工作正常ng-switch,但如果是这种情况我不知道如何切换我的下拉列表.这可能是什么问题？

jsFiddle:http://jsfiddle.net/tanweihao88/LUzXT/3/

HTML:

<select ng-model="periodRangeModel" ng-options="item for item in items"></select>
<div ng-switch on="periodRangeModel">
    <span ng-switch-when="Month"><period-selector items="monthOptions" ng-model="periodModel"></period-selector></span>
    <span ng-switch-when="Quarter"><period-selector items="quarterOptions" ng-model="periodModel"></period-selector></span>
    <br>
</div>

JS:

angular.module('myApp', [])
.controller("MyCtrl", function($scope) {
    $scope.items = ['Month', 'Quarter'];
    $scope.periodRangeModel = "Month";
    $scope.quarterOptions = ["Jan-Mar", "Apr-Jun", "Jul-Sept", "Oct-Dec"];
    $scope.monthOptions = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"];
    $scope.periodModel = $scope.monthOptions[0];
})
.directive('periodSelector', function() {
    return {
        restrict: 'E',
        replace: true, …