Question

我试图创建一个指令元素，它将获取一组json对象并创建一系列按钮。首先，我想我会尝试只使用左右按钮。以下是我尝试使用它的方法

<div ng-controller="FormCtrl as form">
   <buttongroup 
      left-func="form.cancel()" left-text="Reject Call" 
      right-func="form.submit()" right-text="Accept Call">
   </buttongroup>
</div>

继承人指令代码

.directive('buttongroup', function() {
   return {
      restrict: 'E',

      scope: {
         leftFunc: '@',
         leftText: '@',
         rightFunc: '@',
         rightText: '@'
      },

      template: '<button type="button" ng-click="{{leftFunc}}">{{leftText}}</button><button type="button" ng-click="{{rightFunc}}">{{rightText}}</button>',
   };
});

这会创建正确的html，但ng-click不适用于按钮。我假设这是因为它们在指令的模板范围内，并且无法以form.submit或form.cancel的形式访问FormCtrl函数。

我是一个全新的角色，仍然试图找出范围如何工作，所以任何帮助将不胜感激。

Answer 1

您想调用该函数，因此需要调用它。您的模板中存在语法错误。一定是这样的：请注意我是如何使用ng-click指令

的

template: '<button type="button" ng-click="leftFunc()">{{leftText}}</button><button type="button" ng-click="rightFunc()">{{rightText}}</button>'

访问指令模板内的外部控制器功能

1 个答案: