Question

我是Angular的初学者，我试图理解为什么在某些情况下我的ng-click根据上下文不起作用。首先，这是我的代码，然后我会尝试更准确地描述我的问题。

HTML：

<div ng-app='myApp'>
   <section id="map-orders" ng-controller="ProductsController as products">
      <div class="product-box" ng-repeat="products in products.products | orderBy:'name'">
         <div class="product">
            <h3> {{products.name}} </h3>
            <span ng-click="remove($index)">Remove</span>
         </div>
      </div>
   </section>
</div>

JS：

var app = angular.module('myApp', [ ]);

app.controller('ProductsController', function(){
    this.products = products;   
    this.remove = function(index) {
        products.splice(index, 1);
    }
});

var products = [
    {
        name: "Carte 1", 
        generationDate: "03/03/2016",
    },
    {
        name: "Carte 2", 
        generationDate: "04/03/2016",
    }
];

所以这段代码正在运行。但是当我通过添加一个指令来改变它时： HTML：

<div ng-app='myApp'>
   <section id="map-orders" ng-controller="ProductsController as products">
      <div class="product-box" ng-repeat="products in products.products | orderBy:'name'">
         <product></product>
      </div>
   </section>
</div>

使用此指令addiotionnaly到原始js：

app.directive('product', function() {
    var tpl = '<div class="product">' +
    '<h3 {{products.name}} </h3>' +
    '<span ng-click="remove($index)">Remove</span>'
    '</div>';
    return {
        restrict: 'E',
    template: tpl,
    };
});

我的remove（）函数现在不起作用。我不明白为什么。有人可以帮我吗？如果可能的话，特别是我的代码，所以我得到了问题。

先谢谢你

Answer 1

由于您使用 controllerAs 语法，因此您需要在模板中为函数remove指定别名。

jsfiddle上的实例。

var myApp = angular.module('myApp', []);

myApp.controller('MyCtrl', function($scope) {
    this.products = [{
      name: "Alex",
    }, {
      name: "Sam"
    }];
    this.remove = function(index) {
      this.products.splice(index, 1);
    }
  })
  .directive("product", function() {
    var tpl = '<div class="product">' +
      '<h3> {{product.name}} </h3>' +
      '<span ng-click="my.remove($index)">Remove</span>'
    '</div>';
    return {
      restrict: 'E',
      template: tpl,
      link: function(scope) {
        console.log(scope);
      }
    };
  });

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp">
  <div ng-controller="MyCtrl as my">
    <div class="product-box" ng-repeat="product in my.products">
      <product></product>
    </div>
  </div>
</div>

P.S。你在模板中有错误。您没有关闭 h3 标记

Answer 2

此处您的指令仅使用ProductsController的相同范围。因此，ProductsController中的删除方法可以使用products.remove($index)调用，因为您在指定as controller时遵循driver.Navigate().GoToUrl("https://moodpk01.wordpress.com/wp-login.php"); driver.FindElement(By.Id("user_login")).SendKeys(""); driver.FindElement(By.Id("user_pass")).SendKeys(""); driver.FindElement(By.Id("wp-submit")).Click();语法你的HTML中的控制器

未从指令模板调用的单击函数

2 个答案: