Question

我的应用程序在客户端使用Angularjs。我有五个使用相同逻辑的指令。以下是我的代码所需的详细信息

我有一个纯javascript类作为AppUtilities.js，定义了以下方法

var AppUtilities = {
  //Get the guid for given collection
  getGUID: function (collectionName) {
      var prefix;
      var guid;
      //get first two character
      if (!Utilities.isEmpty(collectionName)) {
         prefix = collectionName.substring(0, 2);
         //Get timestamp
         var timestamp = Utilities.getTimestampId();
         //concate prefix to get the guid
         guid = prefix + timestamp;
      }
      return guid;
  }
};

我有五个不同的指令，我需要使用“getGUID（）”方法与模板绑定。由于模板只能与范围函数绑定，因此我在所有这五个模板中定义了范围方法，如下所示
```
scope.getGUID = function (collectionName) {
  return AppUtilities.getGUID(collectionName);
}
```

然后在所有五个指令模板中，此方法绑定为范围变量

<h4 class="guid" id="guid" data-ng-bind-template="{{getGUID('goal')}}"></h4>

如何避免将这些方法声明为范围变量并直接在HTML模板中用作AppUtilities.getGUID(collectionName)？

Answer 1

有多种方式，但老实说，这似乎比它的价值更多，因为你可以做到：

scope.getGUID = AppUtilities.getGUID;

当然，你可以使用$rootScope，但对我个人来说感觉不对 - 我喜欢当事情被明确宣布并且不会神奇地出现。

或者，如果您只需要在UI中呈现GUID，请创建一个GUID指令。例如：

.directive("guid", function(){
  return {
    template: "<span>{{getGUID()}}</span>",
    link: function(scope, element, attrs){
       scope.getGUID = function(){
         return AppUtilities.getGUID(attrs.guid || attrs.name);
       };
    }
  }
});

并用作：

<h4 class="guid"><guid name="goal"></guid></h4>

Answer 2

无需操作单个范围或根范围，您只需定义一个可在所有模板中使用的过滤器。请注意，出于所有充分的理由，我仍然定义并注入AppUtilities，即使它是全球性的，也是它自己的服务。

app.filter('toGUID', ['AppUtilities', function (AppUtilities) {
  return function (input) {
    return AppUtilities.getGUID(input);
  };
}]);

// <pre>{{ 'goal'|toGUID }}</pre>

app.service('AppUtilities', function () {
  return AppUtilities;
});

＆＃13;

(function (app, ng) {
  'use strict';

  app.filter('toGUID', ['AppUtilities', function (AppUtilities) {
    return function (input) {
      return AppUtilities.getGUID(input);
    };
  }]);
  
  app.service('AppUtilities', function () {
    return AppUtilities;
  });

  var Utilities = {
    isEmpty: function (collectionName) {
      return false;
    },
    getTimestampId: function () {
      return '_something';
    }
  };

  var AppUtilities = {
    //Get the guid for given collection
    getGUID: function (collectionName) {
      var prefix;
      var guid;
      //get first two character
      if (!Utilities.isEmpty(collectionName)) {
        prefix = collectionName.substring(0, 2);
        //Get timestamp
        var timestamp = Utilities.getTimestampId();
        //concat prefix to get the guid
        guid = prefix + timestamp;
      }
      return guid;
    }
  };

})(angular.module('app', []), angular);

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.0-rc.2/angular.min.js"></script>

<div data-ng-app="app">
  <pre>{{ 'goal'|toGUID }}</pre>
</div>

＆＃13;

Answer 3

将其隐藏在div中：

<div id="hidden" data-ng-model="hidden" style="display:none"></div>
<script>
$('#hidden').html(AppUtilities.getGUID(collectionName));
</script>

然后，ng-bind到div的内容：

<div id="realDiv" data-ng-bind-html="hidden"></div>

在Angularjs模板中绑定javascript方法

3 个答案: