我的应用程序在客户端使用
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)？
解决方法
有多种方式,但老实说,它似乎比它的价值更多的努力,因为你可以这样做：
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>
