Question

我在页面中包含以下脚本：

<script>
    $(document).ready(function () {

        $(".fancy-class").chatter({
            hostname: 'http://www.domain.com',
            group: 'moustache',
            brand: '{{brand.name}}'
        });
    });
</script>

我希望将品牌设置为一个我知道存储在我的角度模型中的品牌。

我该怎么做？

Answer 1

AngularJS不会像这样插入脚本。实现需要与角度应用程序交互的非角度代码的推荐方法是编写自定义指令。

我创建了一个plunk，用于说明如何通过指令处理您的示例。

精彩集锦（JS）：

  angular.module("demo", [])
    // omitted for brevity
    .directive('fancyClass', function() {
      return {
        restrict: 'C', // directive is triggered via a class name called fancy-class
        scope: {
          'brand': '&' // lets us use an attribute named brand to declare the scope value containing the value we want
        },
        link: function(scope, element, attrs) {
          // initializes the jQuery plugin, using the scope value for brand
          element.chatter({
            hostname: 'http://www.domain.com',
            group: 'moustache',
            brand: scope.brand()
          });
        }
      }
    });

在视图中的标记上使用它：

<span class="fancy-class" brand="fancyValue">Fancy 1</span>

Answer 2

创建自己的全局通信器，以便对其进行angular和jquery访问。

如何从外部jQuery脚本中访问angularJS模型数据？

2 个答案: