javascript - 在指令中使用 '@' 时获取未定义的值

Question

我创建了一个具有隔离范围的指令，并尝试使用“@”符号赋值。为了。例如指令看起来像这样。

xyz.js

<!-- language: lang-js -->

angular.directive('xyz', function($http, $timeout, $ocLazyLoad) {
   return {
       restrict: 'AE',
       templateUrl: 'urlPATH',
       scope: {
       name : '=',
       maxCount: "@"
       },
       link: function(scope, element, attributes) {
       scope.maxCount = scope.maxCount == undefined ? "1" : scope.maxCount;
       console.log(scope.maxCount) //Onload of the page it print 1 
       console.log(scope) // Onload it will print whole **scope** object with value of      **maxCount** is *undefined*.
       // The function which is call on keyup event defined in template.
       //For e.g.
       scope.getUrl = function(){
       console.log(scope.maxCount)
    }
}

模板.html

<div style="display:block;">
      <form class="form-horizontal" role="form" style="margin-bottom:-8px;">
        <div class="form-group">
            <div class="col-sm-10">
                <div class="input-group input-group-sm lookup-drop dropdown ">
                    <input  type="text" class="form-control clearable " ng-model="xyz.name" ng-keyup="getUrl()" >
                </div>
               </div>
           </div>
     </div>

如果在test.jsp中使用指令，如下所示:

<!-- language: lang-js -->
<xyz  name="test" max-count="10"></xyz> 

然后在 keyup 事件控制台上将如下所示。

10

如果在test.jsp中使用指令，如下所示:

<!-- language: lang-js -->
<xyz  name="test" ></xyz> 

然后在 keyup 事件控制台上将如下所示。

undefined

我不明白为什么会发生这种情况。有什么我忘记的吗，如果有的话请告诉我。预先感谢!

Answer 1

scope.maxCount 绑定(bind)到您的属性，并且可以被视为只读。尝试使用另一个变量:

scope.max = scope.maxCount || "1";
/* use scope.max instead of scope.maxCount */

或者，不绑定(bind)到范围，而是从属性读取:

scope.maxCount = attributes.maxCount || "1";

.. 并从范围映射中删除 maxCount: "@"。