Question

我正在尝试在模板中使用范围变量：

function FruitDirective() {
  return {
    restrict: 'AE',
    scope: {
      name: '@'
    },
    template: `
    {{name}}
    <span name="name"></span>
    `
  };
}

例如，name="Apple"

第一个代码{{name}}可以直接显示Apple

第二个代码<span fruit-name="name"></span>，我想解析为<span name="Apple"></span>，但它不起作用。

那么如何正确使用呢？谢谢。如果你能给我这个概念的来源，那就更好了。我搜索了很多，但找不到任何东西。

更新

http://jsfiddle.net/Lvc0u55v/5196/

我希望结果为Hello, AppleApple

Answer 1

＆＃13;

var myApp = angular.module('myApp',[]);

myApp.directive('fruitDirective', function() {
  
  return {
    restrict: 'AE',
    scope: {
      name: '=fruit'
    },
    template: `
    {{name}}
    <span name="{{name}}"></span>
    `
  };  

});
//myApp.factory('myService', function() {});

function MyCtrl($scope) {
  // controller
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<body ng-app="myApp">
  <div ng-controller="MyCtrl">
    Hello,
    <fruit-directive fruit="'Apple'"></fruit-directive>
  </div>
</body>

＆＃13;

Answer 2

使用{{name}}来设置属性。

template: `
<span name="{{name}}">fruit: {{name}}</span>
`

此外，您的模板必须返回单个根元素，因此我认为将{{name}}放在元素之外可能会导致错误。

这是一个jsfiddle示例https://jsfiddle.net/h9f62jmw/1/

如何在模板html属性中使用指令范围变量？

2 个答案: