如何将指令范围值传递给在同一指令的模板中调用的全局javascript函数?

时间:2016-02-09 23:58:31

标签: javascript angularjs angularjs-directive angularjs-templates

我对指令中值的工作方式提出了疑问。我有一个指令,它有一个模板,在同一个模板中,我想调用一个(全局定义的)javascript函数,并进入该javascript函数,我想传递我从指令得到的值(它可能听起来有点混乱)。 这是示例代码。

angular.module("Shell").directive("myFormField", function () {
return {
    scope: {
        text: "@",
        required: "@",
    },
    transclude: true,
    replace: true,
    template:
        '<div>' +
        '<label style="white-space: nowrap;font-weight: normal;width: 100% !important">'+globalLoadText(text)+
        '<div style="margin-top: 1.5px;" ng-transclude />' +
        '</label>' +
        '</div>'
};
});

globalLoadText()是我的全局方法,定义为侧角(在根范围内的普通js文件中) text 将是我想从指令中获取的值。

我希望我已经清楚地写下了我的问题。任何帮助将受到高度赞赏。谢谢!

1 个答案:

答案 0 :(得分:1)

我强烈建议你解释为什么你需要一个全局函数,因为它不难实现你想要的。但这并不意味着你应该这样做。

angular
  .module("Shell")
  .directive("myFormField", myFormFieldDirective);


myFormFieldController.$inject = ['$scope'];

function myFormFieldController($scope) {
  $scope.globalLoadText = _globalLoadText;

  function _globalLoadText() {
    return globalLoadText($scope.text);
  }
}


function myFormFieldDirective() {
  return {
    scope: {
      text: "@",
      required: "@",
    },
    transclude: true,
    replace: true,
    controller: myFormFieldController,
    template: '<div>' +
      '<label style="white-space: nowrap;font-weight: normal;width: 100% !important">{{globalLoadText()}}' +
      '<div style="margin-top: 1.5px;" ng-transclude />' +
      '</label>' +
      '</div>'
  };
}