包含异步改变ID不会触发观察家AngularJS遗留系统集成和内容 [英] AngularJS legacy integration and content that contains asynchronously changing id doesn't trigger watcher

问题描述

我有一个遗留页面＆LT;输入类型=隐藏ID =身份识别码VALUE =somenumber＆GT; 的填充与jQuery（传统code）加载页面的第一次后异步。在这个页面上，我想有一个angularjs指令。唯一的问题是我想观看#myId值，这样我就可以用我的指令，但价值的变化，一旦触发守望它是空的 - 当它实际上会从一个jQuery的价值numercal它不会再发生。我究竟做错了什么？我试着用NG-值，NG-模型，但我还是得到了一个未定义的那些企图。此外，它不可能引入路由等，以从那里..由于

获得的ID

下面是我的指令：

  angular.module（MyModule的）
.directive（MYDIR功能（）{
    返回{
        限制：'A'，
        templateUrl：template.html
        范围 ： {}，
        链接：功能（范围，元素，ATTRS，CTRL）{
            。范围$表（函数（）{返回$（＃MYID）VAL（）}，功能（的newval）{ctrl.myId =的newval}）;
        }，
        controllerAs：myCtrl
    };}）;
 

解决方案

角不知道jQuery的改变（明显）的。您可以发出数据在jQuery的自定义事件，捕获事件的角度，并转播到你的指令得到它的第一次。

下面是与它plunkr工作： http://plnkr.co/edit/RTIzEudC7TktDTSdqWnQ
它将更新网页上的结合的jquery页面加载后发出一个事件后5秒

  //发出jQuery中
（文档）$ .trigger（自定义事件，数据）;app.run（['$ rootScope'，函数（$ rootScope）{
    //捕捉jQuery的事件，并重新播放它们作为角事件
                //事件捕捉
                VAR的事件= [
                    自定义事件
                ];                //使用方法：$ $范围在（'eventName的'功能（ngEvent，jqEvent，数据）
                $（文件）。在（events.join（''），功能（E）{
                    $ rootScope $ broadcast.apply（$ rootScope，[e.type] .concat（Array.prototype.slice.call（参数，0）））;
                }）;
}）;//听它在指令
范围。在（自定义事件'$，函数（）{
    范围。$应用（函数（）{
        //做的东西在这里和角度会意识到这一点
    }）;
}）;
 

I have a legacy page that has a <input type="hidden" id="myId" value="somenumber"> that is populated with Jquery (legacy code) asynchronously after the page loads for the first time. On this page I am trying to have an angularjs directive. The only problem is I am trying to watch on #myId value so I can use it for my directive but the value changes and triggers the watcher once and it is empty - it doesn't happen again when it actually gets a numercal value from jquery. What am I doing wrong? I tried with ng-value,ng-model but still I get undefined for those attempts. Also it is not possible to introduce routing etc to get the id from there.. Thanks

Here is my directive:

angular.module("myModule")
.directive("myDir", function () {
    return {
        restrict: 'A',
        templateUrl: "template.html",
        scope : {},
        link: function (scope, element, attrs, ctrl) {
            scope.$watch(function () { return $("#myId").val() }, function (newVal) { ctrl.myId= newVal});
        },
        controllerAs: 'myCtrl'
    };

});

解决方案

Angular is unaware of the jquery change (obviously). You can emit the data in a custom event in jQuery, capture that event in angular and rebroadcast it to your directive to get it the first time.

Here is a plunkr with it working: http://plnkr.co/edit/RTIzEudC7TktDTSdqWnQ It will update the binding on the page after jquery emits an event 5 seconds after page load

//emit in jquery
$(document).trigger('customEvent', data);

app.run(['$rootScope', function ($rootScope) {
    //capture jQuery events and re-broadcast them as angular events
                //events to capture
                var events = [
                    'customEvent'
                ];

                //To Use: $scope.$on('eventName', function(ngEvent, jqEvent, data)
                $(document).on(events.join(' '), function(e) {
                    $rootScope.$broadcast.apply($rootScope, [e.type].concat(Array.prototype.slice.call(arguments, 0)));
                });
});

//listen for it in directive
scope.$on('customEvent', function(){
    scope.$apply(function(){
        //do stuff here and angular will be aware of it
    });
});

这篇关于包含异步改变ID不会触发观察家AngularJS遗留系统集成和内容的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！