Question

更新

我想我发现了这个问题，模板变量正在失去它的价值，我还没弄到原因，我已经改变了一下代码：

      var template;

      $templateRequest("ng-templates/app/cart-counter.html").then(function(html){
        template = angular.element(html);
        element.append(template);
        $compile(template)(scope);
        console.log("template: " + template); // This returns the template object
      });

      var unbindWatcher = scope.$watch(
        "clickCounter",
        function(newClickCounter){
          console.log("template: " + template); // This returns undefined
          if (newClickCounter >= 5) {
            var cartButton = this.template.children('.btn');

            cartButton.toggleClass('btn-success'); // this throws undefined error

            unbindWatcher();
          }
        }
      );

现在我的问题是为什么模板变量在前面有一个值时是未定义的，我应该怎么做才能修复它？

原始问题

我正在玩Angular，试图通过编译将一个html添加到DOM来改变一些元素类，当事件发生时，我试图使用angularElement来访问我编译的html的子节点并切换一些类

这不是给我一个错误，但课程的变化没有发生，我找不到我做错了，请帮忙。

这是指令的代码：

store.directive("appCartCounter", ['$templateRequest', '$compile', function($templateRequest, $compile){
    var link = function(scope, element){
      this.messages = [
        "Sorry, the shopping cart is not implemented",
        "Hey, I told you, it's not ready",
        "Stop that! It's anoying",
        "I'm getting really really angry",
        "YEarghhh!!!!"
      ];

      scope.messages = this.messsages;
      scope.clickCounter = 0;
      scope.incrementCount = function(){
        scope.clickCounter++;
      };

      $templateRequest("ng-templates/app/cart-counter.html").then(function(html){
        this.template = angular.element(html);
        element.append(template);
        $compile(template)(scope);
      });

      var unbindWatcher = scope.$watch(
        "clickCounter",
        function(newClickCounter){
          console.log("I've been watching you... alalalong");
          if (newClickCounter >= 5) {                
            var cartButton = this.template.children('.btn');
            var messageElement = this.template.children('.text-info');
            cartButton.toggleClass('btn-success');
            cartButton.toggleClass('btn-danger');
            cartButton.toggleClass('btn-lg');

            messageElement.toggleClass('text-info');
            messageElement.toggleClass('text-danger');
            messageElement.toggleClass('text-capitalize');
            messageElement.toggleClass('lead');

            unbindWatcher();
            console.log("I'm blind!!");
          }
        }
      );

    };

    return {
      restrict: 'E',
      scope: {
        'addedProducts' : '='
      },
      replace: 'true',
      link: link
    };
  }]);

推车counter.html：

<button
  class="btn btn-success"
  data-ng-show="addedProducts.length"
  data-ng-click="incrementCount()"
  data-ng-cloak>
  <i class="glyphicon glyphicon-shopping-cart"></i> {{addedProducts.length}}
</button>
<p data-ng-show="clickCounter" class="text-info">
  {{messages[clickCounter]}}
</p>

html使用指令：

<app-cart-counter data-added-products="storeCtrl.addedProducts"></app-cart-counter>

我会尝试在一个plunker中得到一个更简单的例子。

谢谢！

Answer 1

最后，我设法通过将模板保存到范围来“修复”问题，尽管我仍然不明白为什么变量或将其保存为“this”。没用。

作为旁注，通过标记名选择子项不起作用，我也尝试使用子编号和类名（即使我在解决方案中导入了jquery）。要解决这个问题，我必须通过模板对象的数组访问元素，并将其包装在angular.element（）中，例如：

var cartButton = angular.element(scope.template[0]);
var messageElement = angular.element(scope.template[2]);

PS：scope.template [1]因为换行符而给我一个文本节点，我没想到。

在Angularjs

1 个答案: