Question

我正在尝试编写我的第一个指令并且有点困惑。我想返回一个编译模板，其中ng-click功能正常。我有（http://plnkr.co/edit/gr3ha1lxgcFp3z4L148S?p=preview）：

var arcModule=angular.module('Octo', []);


arcModule.controller('MainCtrl', function($scope, $http){

  $scope.sayHello=function(){
    alert("hello");
  }
});  

Octo.directive('myCustomer', function() {
        return {
            template: 'Name: <div ng-click="sayHello()">say hello</div> Address: '
        };
});

在我的plnkr中，为什么我的客户指令没有被输出？

但是对于下一步是什么，我有点无能为力。我有点得到链接和编译的概念，但不知道如何实现。我怎么能这样做？文档就像糖蜜，我觉得我正在做的事情非常简单。

thx任何帮助

Answer 1

您遇到的问题（在上面的代码中不明确）是您要覆盖定义了click函数的控制器。

您的代码中有两次：arcModule.controller('MainCtrl', function($scope) {

我所做的只是使你的指令工作是删除第二个控制器定义，以便使用第一个带有click函数的（你真的只需要将它们组合起来）。然后将<div my-customer></div>添加到DOM。该指令启动并添加了指令标记，并且单击功能正常工作。

以下是您更正的完整代码：Live demo (click).

<强> JavaScript的：

var arcModule=angular.module('Octo', []);

arcModule.controller('MainCtrl', function($scope, $http){
  $scope.sayHello=function(){
    alert("hello");
  }
  $scope.customer = {
    name: 'Naomi',
    address: '1600 Amphitheatre'
  };
});  

arcModule.directive('myCustomer', function() {
  return {
    template: 'Name: {{customer.name}}<button ng-click="sayHello()">Click to say hello.</button> Address: {{customer.address}}'
  };
});

<强>标记：

<body ng-app="Octo" ng-controller="MainCtrl">
  <div my-customer></div>

第一次编写Angular指令并返回已编译的模板

1 个答案: