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

标签 javascript angularjs angularjs-directive

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

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

最佳答案

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
}
<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>

关于javascript - 如何在模板 html 属性中使用指令范围变量?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/37648162/

相关文章:

javascript - 第二个 jquery 插件不能在线工作,但可以在本地主机中工作

javascript - 我可以简化这个 Javascript 循环吗?

ruby-on-rails - 签名的合法性

javascript - 如何使用 "this"获取 "$event.target"背景图像的 url 以在 ionic 模式中显示

javascript - 从指令 AngularJS 更改 Controller 范围值

javascript - 递归 AngularJS 指令

javascript - 跟踪窗口调整大小 AngularJS 上的元素宽度

javascript - 循环中的 JS onclick 事件

javascript - 从 Ember.js 中的 Ember 服务过渡

javascript - 连续对齐 3 列 div 不起作用