Question

我对Thinkster示例中的一个部分有疑问。我认为我缺乏理解源于较弱的Javascript知识，而不是理解AngularJS的一些基本原理。自12月以来，我一直在自学，学习JavaScript的基础知识，现在是Angular。如果你能解释一下（就像我5岁那样），我将不胜感激！ Thinkster Page

App.js

import junit.framework.TestCase;

public class ComplexNumberTest extends TestCase{

private ComplexNumber test1;
private ComplexNumber test2;
private ComplexNumber test3;
private ComplexNumber test4;
private ComplexNumber test5;


public void setUp(){
    test1 = new ComplexNumber (1,-1);
    test2 = new ComplexNumber(2,2);
    test3 = new ComplexNumber(0,2);
    test4 = new ComplexNumber(3,1);
    test5 = new ComplexNumber(4,4);
}//end set up


/**
 * A method used to test the add method.
 * add two Complex numbers together
 * (ai+bi)=a+bi
 * 
 **/ 
public void testAdd()
{
    assertEquals(test1.add()==0);
    //assertTrue(test2.add()==4);
    //assertEquals(test3.add()==2);
    //assertEquals(test4.add()==3);
    //assertEquals(test5.add()==8);
}//end testAddition

HTML

app.controller("ChoreCtrl", function($scope){
  $scope.logChore = function(chore){
    alert(chore + " is done!");
  };
});

app.directive("kid", function() {
   return {
    restrict: "E",
    scope: {
    done: "&"
   },
    template: '<input type="text" ng-model="chore">' +
    //This is the part I'm slightly confused about

      '{{chore}}' +
      '<div class="button" ng-click="done({chore: chore})">I\'m done</div>'
  };
});

{chore：chore}如何运作？ Thinkster声明如下：

{chore：chore}语法映射我们在＆lt; input＆gt;中创建的模型的杂项。当我们说'done =“logChore（chore）”'（在kid指令中）
时传递给logChore函数

我的想法是：

点击调用“完成”，根据HTML属性调用“logChore（chore）”
我猜<div ng-app="choreApp"> <div ng-controller="ChoreCtrl"> <kid done="logChore(chore)"></kid> </div> </div>，在App.js中传递给logChore，所以在某种意义上它是logChore（chore：chore）？

为什么我不能"{chore:chore}"？ ng-click=(done(chore))究竟发生了什么？可能很清楚我不知道哈哈会发生什么。

非常感谢大家！

Answer 1

这是因为&运算符，请看这里：https://docs.angularjs.org/api/ng/service/ $ compile＃-scope -

它说：

＆安培;或＆amp; attr - 提供在父作用域的上下文中执行表达式的方法。如果未指定attr名称，则假定属性名称与本地名称相同。

所以基本上，它访问父作用域的chore属性，否则我们将在指令的隔离范围内，它没有chore属性。

另外，请在此处查看他的解释：https://thinkster.io/egghead/isolate-scope-am

看看这段代码是否澄清了一点 - 我修改了属性名称，现在我们有innerChore，outerChore和param以避免名称混淆：

var app = angular.module('choreApp', []);

app.controller("ChoreCtrl", function($scope){
  $scope.logChore = function(param){
    alert(param + " is done!");
  };
});

app.directive("kid", function() {
  return {
    restrict: "E",
    scope: {
        done: "&"
      },
    template: '<input type="text" ng-model="innerChore">' +
      '{{innerChore}}' +
      '<div class="button" ng-click="done({outerChore: innerChore})">I\'m done</div>'
  };
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.7/angular.min.js"></script>
<div ng-app="choreApp">
  <div ng-controller="ChoreCtrl">
    <kid done="logChore(outerChore)"></kid>
  </div>
</div>

请注意{outerChore: innerChore}中的关系。

Answer 2

考虑done属性表达式所说的内容：logChore(chore)。这是针对$scope的{{1}}进行评估的（这意味着变量和函数名称必须位于该范围对象上）。好的，让我们来看看我们所指的变量和函数：ChoreCtrl和logChore()。 chore有意义，这是logChore()上的显式函数属性。但是$scope对象的chore在哪里？无处！

现在，当您在指令的$scope函数中调用.done()时，您将传入一个 locals map ，它指定将覆盖{的任何变量的值。 {1}}。在这种情况下，link()表示“使用指令的隔离范围上的$scope对象作为{chore: chore}变量（如果有）的值，为{{1突然，我们知道chore表达式中chore是什么，我们以前没有。

这更有意义吗？

Thinkster示例：将数据从模型传递到指令

2 个答案: