angularjs:访问angular控制器中的jquery变量

angularjs: access jquery variable in angularjs controller

本文关键字：jquery 变量 控制器 访问 angular angularjs      更新时间：2023-09-26

角度js代码

angular.module('myapp')
  .controller('PostsController',  function($scope, $window, $http){
  $scope.$watch('selectedCities', function(newValue, oldValue) {
     if(newValue === oldValue ){
      return;
    }
    //to call a jQuery variable wookmark
  }, true);
}

jquery代码

 $(function ($) {
      var container = '#wookmark_container',
          $container = $(container),
          tileCount = 30,
          $window = $(window),
          $document = $(document),
          wookmark;
      // Initialize Wookmark
      wookmark = new Wookmark(container, {
        offset: 5, // Optional, the distance between grid items
        outerOffset: 10, // Optional, the distance to the containers border
        itemWidth: 260, // Optional, the width of a grid item
        autoResize: true
      });
    });

我想做的是，如果选择选项发生变化，我想重新加载一个wookmarkjquery插件。

在angularjs中调用一个jquery是否可行？

谢谢你的帮助。

您可以引用Angular控制器范围内的任何变量。

看起来woodmark是在它自己的函数范围内定义的，这意味着你不能访问它。要访问它，你需要将它设置为全局窗口对象的属性，如下所示：

window.woodwork =  "initial value";

然后，您可以使用$window服务在控制器中引用它。

$window.woodwork = "updated value";

试试这个，

  1. 在父作用域或全局作用域（即就绪块外）中声明变量"wookmark"。这将使该变量在任何地方都可以访问。您将能够在angular的控制器中访问它

    var woomark;
$(function ($) {
   // Initialize Wookmark
   wookmark = new Wookmark(container, {...});
});

  2. 要重新加载woomark插件，您可以在代码中进行如下调用。

    angular.element(document.querySelector('#wookmark_container')).trigger('refreshWookmark');

或直接

$('#wookmark_container').trigger('refreshWookmark')

这是"refreshWookmark"的文档链接https://github.com/GBKS/Wookmark-jQuery

相关文章：