嵌套自定义指令

时间:2017-07-01 15:42:34

标签: javascript angularjs

我可以使用一些帮助。 我有一个控制器包含一个名为“loadInformation()”的函数。在这个控制器里面,我使用一个服务,它使用自定义指令进行一些DOM操作。 这些是指令:

首个自定义指令:

angular.module('...').directive('ngInputString', function () {
return {
restrict: 'AE',
replace: 'true',
scope: {
  savedInformation: '=',
  type: '@',
  values: '='
},
templateUrl: 'directives/templates/inputString.html',
link: function (scope, element, attrs) {
  scope.filterOb = {ttype: scope.type};
}
}
});

HTML文件:

<div>
<input ttype="{{type}}" type="text" placeholder="{{param.name}}"         value='{{param.value}}'
     class='clean-input form-control'/>
 <ng-saved-information type="STRING" saved-information="savedInformation"></ng-saved-information>
 </div>

嵌套自定义指令:

angular.module('semtrosApp').directive('ngSavedInformation', function    () {
return {
restrict: 'AE',
replace: 'true',
scope: {
  savedInformation: '=',
  type: '@'
},
template: '<ul><li ng-repeat="information in savedInformation |    filter:filterOb">{{information.value}}<button type="button" ng-click="..?..">Use Information</button></li></ul>',
link: function (scope, elem, attrs) {
  scope.filterOb = {ttype: scope.type};
}
}
});

当我不使用嵌套指令时,它可以很好地处理这段代码:

elem.bind('click', function() {
    scope.$apply(function() {
      scope.loadInformation();
    });
  });

但是当它们嵌套时,第二个自定义指向性只是查看父指令的范围。知道如何通过函数调用吗?

1 个答案:

答案 0 :(得分:1)

看起来ngSavedInformation指令已经接受了一些数据并将其传递给loadInformation。为什么不将它带入angular.module('...').directive('ngInputString', function () { return { scope: { savedInformation: '=', type: '@', values: '=', loadInformation: '&' }, // etc } }); <ng-saved-information type="STRING" saved-information="savedInformation" load-information="loadInformation()"></ng-saved-information> angular.module('semtrosApp').directive('ngSavedInformation', function () { return { scope: { savedInformation: '=', type: '@', loadInformation: '&' }, // etc } }); 回调并传递下去?

ng-click="loadInformation()"

此外,您可以在模板中执行以下操作,而不是手动创建单击处理程序:

{{1}}