在自定义指令设置属性值时字符串插值无法工作 [英] String Interpolation Won't Work when Setting Attribute Values on a Custom Directive

问题描述

我应该能够从$ scope属性传递到这种​​自定义指令？

 ＆LT; D​​IV NG重复=应课差饷租在ratables＆GT;
            ＆LT; D​​IV＆GT;你有多喜欢{{ratable.name}}＆LT; / DIV＆GT;            ＆LT;！ -  CONFUSED  - 第一个元素是不行的，第二个元素呢 - ＆GT;
            ＆LT;评级currentRatingValue ={{ratable.currentvalue}}maxRatingValue =10＆GT;＆LT; /评级＆GT;
        ＆LT; / DIV＆GT;
 

的硬连线10通过进入指令就好了，但是串插，当我试图通过{{ratable.currentvalue}}似乎永远不会发生。难道我做的事情显然是错误的？

http://jsfiddle.net/ADukg/2168/

  VAR对myApp = angular.module（对myApp'[]）
    .directive（评级功能（）{
        返回{
            限制：E，
            范围： {}，
            模板：＆LT; D​​IV CLASS ='评级'＆GT;额定电流：{{currentratingvalue}}出来{{maxratingvalue}}＆LT; / DIV＆gt;中，
                链接：功能（范围，元素，属性）{
                    的console.log（attributes.currentratingvalue）; //不工作，但似乎应该
                    的console.log（attributes.maxratingvalue）; //不工作
                }
            };
        }）;功能MyCtrl（$范围）{
    $ scope.name ='超级英雄';    $ scope.ratables = [
        {名：雪橇，CurrentValue的：3，MAXVALUE：5}，
        {名：滑水，CurrentValue的：7，MAXVALUE：10}，
        {名：泛舟，CurrentValue的：空，MAXVALUE：10}
    ];
}＆LT; D​​IV＆GT;
    ＆LT; D​​IV NG控制器=MyCtrl＆GT;
      您好，{{名}}！        ＆LT; D​​IV NG重复=应课差饷租在ratables＆GT;
            ＆LT; D​​IV＆GT;你有多喜欢{{ratable.name}}＆LT; / DIV＆GT;            ＆LT;！ -  CONFUSED  - 第一个元素是不行的，第二个元素呢 - ＆GT;
            ＆LT;评级currentRatingValue ={{ratable.currentvalue}}maxRatingValue =10＆GT;＆LT; /评级＆GT;
        ＆LT; / DIV＆GT;
    ＆LT; / DIV＆GT;
＆LT; / DIV＆GT;
 

解决方案

有几件事情：

• 指令在HTML属性需要使用蛇的情况下


• 您不需要分离范围（事实上它导致的问题）;而是使用范围：真正的


• 您需要设置局部范围的属性，使你的模板可以接他们回家


• $观察必须被用来获得插值属性的值（即，属性是使用{{}} S）

HTML

 ＆LT;额定电流，额定值={{ratable.currentvalue}}最高评级值=10＆GT;＆LT; /评级＆GT;
 

指令：

 <$ C C>链接：功能（范围，元素属性）{
   属性。$观察（'currentRatingValue'，函数（newValue）以{
      的console.log（'为newValue ='，为newValue）;
      scope.currentRatingValue =为newValue
   }）
   scope.maxRatingValue = attributes.maxRatingValue;
   的console.log（'MRV ='，attributes.maxRatingValue）;
}
 

小提琴

---

这里是一个使用分离范围的版本：

  .directive（等级，函数（）{
   返回{
      限制：E，
      适用范围：{currentRatingValue：'@'，
               maxRatingValue：@}，
      模板：＆LT; D​​IV CLASS ='评级'＆GT;额定电流：{{currentRatingValue}}
              +出来{{maxRatingValue}}＆LT的; / DIV＆gt;中，
  };
}）;
 

小提琴

如果你想看到在您的链接功能的分离作用域属性的值，你需要使用 $观察或 $手表因为我们使用@。如果你使用'='（双向绑定），你并不需要使用 $观察或 $观看。

Should I be able to pass attributes from the $scope into a custom directive like this?

        <div ng-repeat="ratable in ratables">
            <div>How much do you like {{ratable.name}}?</div>

            <!-- CONFUSED - First element does not work, second element does -->
            <rating currentRatingValue="{{ratable.currentvalue}}" maxRatingValue="10"></rating>
        </div>

The hardwired "10" passes through into the directive just fine, but the string interpolation when I try to pass {{ratable.currentvalue}} never seems to occur. Am I doing something obviously wrong?

http://jsfiddle.net/ADukg/2168/

var myApp = angular.module('myApp',[])
    .directive("rating", function () {
        return {
            restrict: "E",
            scope: {},
            template: "<div class='rating'>Current rating: {{currentratingvalue}} out of {{maxratingvalue}}</div>",
                link: function (scope, element, attributes) {
                    console.log(attributes.currentratingvalue);    // Does not work but seems like it should
                    console.log(attributes.maxratingvalue);        // Does work
                }
            };    
        });

function MyCtrl($scope) {
    $scope.name = 'Superhero';

    $scope.ratables = [
        { name: "sledding", currentvalue: 3, maxvalue: 5 },
        { name: "water skiing", currentvalue: 7, maxvalue: 10 },
        { name: "whitewater rafting", currentvalue: null, maxvalue: 10 }
    ];
}

<div>
    <div ng-controller="MyCtrl">
      Hello, {{name}}!

        <div ng-repeat="ratable in ratables">
            <div>How much do you like {{ratable.name}}?</div>

            <!-- CONFUSED - First element does not work, second element does -->
            <rating currentRatingValue="{{ratable.currentvalue}}" maxRatingValue="10"></rating>
        </div>
    </div>
</div>

解决方案

A few things:

• directive attributes in HTML need to use snake-case
• you don't need an isolate scope (in fact it is causing problems); instead use scope: true
• you need to set local scope properties so your template can pick them up
• $observe must be used to get the value of interpolated attributes (i.e., attributes that use {{}}s)

HTML:

<rating current-rating-value="{{ratable.currentvalue}}" max-rating-value="10"></rating>

Directive:

link: function (scope, element, attributes) {
   attributes.$observe('currentRatingValue', function(newValue) {
      console.log('newValue=',newValue);
      scope.currentRatingValue = newValue
   })
   scope.maxRatingValue = attributes.maxRatingValue;
   console.log('mrv=',attributes.maxRatingValue);
}

Fiddle

---

Here is a version that uses an isolate scope:

.directive("rating", function () {
   return {
      restrict: "E",
      scope: { currentRatingValue: '@',
               maxRatingValue:     '@' },
      template: "<div class='rating'>Current rating: {{currentRatingValue}}"
              + " out of {{maxRatingValue}}</div>",
  };    
});

Fiddle

If you want to see the value of an isolate scope property in your link function, you'll need to use $observe or $watch because we used '@'. If you use '=' (for two-way databinding), you don't need to use $observe or $watch.

这篇关于在自定义指令设置属性值时字符串插值无法工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！