angularjs - 如何从 jQuery 对话框按钮访问我的角度范围？

Question

http://plnkr.co/edit/Rf0VItthVBg6j0z7KudO

我正在使用 jQuery 对话框并想使用对话框按钮，但我不知道如何在范围内触发（当前不存在的）$http 或 $resource 调用返回到具有更新模型的服务器单击 jQuery 对话框按钮时。我觉得好像我要搞错了，但我不知道该往哪里走。

Answer 1

您可以使用 Angular 函数来查找附加到元素的范围并在其上调用函数。我更喜欢真正将其抽象出来并找到根ng-app并将事件广播到应用程序中，以便外部代码不知道内部代码的细节，除了您广播的事件。

angular.$externalBroadcast = function (selector, event, message) {
    var scope = angular.element(selector).scope();

    scope.$apply(function () {
        scope.$broadcast(event, message);
    });
};

然后，从任何代码中，您可以调用类似：

angular.$externalBroadcast('#app-container', 'doSomething', parameters);

在应用程序内部，我会做这样的事情：

$rootScope.$on('doSomething', function(parameters) {
    // handle the external event.
});

如果您不喜欢这种方法，只需获取范围：

var scope = angular.element(selector).scope();

并用它做点什么。只要确保你打电话scope.$apply，否则消化循环不会发生。

Answer 2

最好的方法是添加指令来控制。在旁边添加带有 angularjs 的 jQuery 是个坏主意。指令是用来做这种操作的。

这是我修改了您的plunkr以向您展示您可以使用指令做什么。

app.directive('date', function() {
  return {
     restrict: 'A',
     require: '^ngModel',
     link: function(scope, elm, attrs, ctrl) {
       var dp = $(elm);

       dp.datepicker({
         onSelect: function(dateText) {
           scope.$apply(function() { // Apply cause it is outside angularjs
            ctrl.$setViewValue(dateText); // Set new value of datepicker to scope
           });
        }
       });

       scope.$watch(attrs.ngModel, function(nv) {
         dp.datepicker('setDate', nv); // Update datePicker date when scope change
       });
     }
  }