AngularJS 包含异步更改 ID 的遗留集成和内容不会触发观察器

Question

我有一个遗留页面，它有一个 <input type="hidden" id="myId" value="somenumber">，在页面第一次加载后异步填充了 Jquery（遗留代码）。在此页面上，我尝试使用 angularjs 指令。唯一的问题是我正在尝试观察 #myId 值，因此我可以将它用于我的指令，但该值发生变化并触发观察者一次并且它是空的 - 当它实际上从 jquery。我究竟做错了什么？我尝试使用 ng-value,ng-model 但我仍然对这些尝试未定义。也无法引入路由等从那里获取 id.. 谢谢

这是我的指令：

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

});

Answer 1

Angular 没有意识到 jquery 的变化（很明显）。您可以在 jQuery 中的自定义事件中发出数据，在 angular 中捕获该事件并将其重新广播到您的指令以在第一时间获取它。

这是一个可以正常工作的插件：http://plnkr.co/edit/RTIzEudC7TktDTSdqWnQ 它将在 jquery 页面加载 5 秒后发出事件后更新页面上的绑定

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

AngularJS 包含异步更改 ID 的遗留集成和内容不会触发观察器

AngularJS legacy integration and content that contains asynchronously changing id doesn't trigger watcher

javascript

legacy-code

angularjs