Question

＆＃13;

var app = angular.module('my-app', [], function () {

});

app.controller('AppController', function () {
});

app.directive('copyMe', function () {
  return {
    restrict: 'EA',
    replace:true,
    scope:{wid:'='},
    template: '<div ng-click="copy()">Copy me</div>',
    link: function compile(scope, element, attrs ) {
      scope.copy = function(){
        alert( attrs.wid );
      };
    } 
   };
});

＆＃13;

<!DOCTYPE html>
<html>
<head>
<script src="https://rawgit.com/angular/bower-angular/master/angular.min.js"></script>
  <meta charset="utf-8">

</head>

 <body ng-app="my-app" ng-controller="AppController">
  <copy-me wid="'1dfvdfv23'"></copy-me>
  <copy-me wid="2"></copy-me>
  <copy-me wid="3"></copy-me>
 </body>  
  
</html>

＆＃13;

一个简单的ang指令。我需要在我的应用程序中的许多地方重复使用copy-me功能。问题是，现实世界的应用是“wid＆＃39;实际上是一个mongo doc id，它是字母和数字的组合。

出于某种原因，当我把mongo id作为＆＃39; wid＆＃39; angular抛出一个解析错误。

当我用单引号括起来传递id时，它不会抛出一个解析错误，但在字符串中包含单引号。

单击不同的文本以查看运行代码段的时间。我知道我可以删除单引号，但这似乎不对。

是否有通过这种方式通过指令传递多字符串的正式方法？

还有一个jsfiddle链接：https://jsbin.com/bajulepewi/edit?html,js,output

Answer 1

范围wid属性应为@，而不是=。 =表示双向数据绑定（https://docs.angularjs.org/api/ng/service/ $ compile＃directive-definition-object），因此您放在属性上的值应该是范围或控制器上的属性名称，ng将读取和写入。第一个示例出现解析错误，因为它不是有效的属性名称，而其他两个有效。如果删除第一个值的第一个字符，它应该“工作”。但是，您的问题表明您确实想要使用@（单向绑定），因为您可能不希望在指令中更改mongo doc ID。

通过param将mongo doc id传递给angular指令函数抛出解析错误

1 个答案: