我正在使用一个Web应用程序,该应用程序允许设计人员通过与自己和其他开发人员创建的angularjs指令结合编写html来创建页面。我正在努力用数据填充指令的最佳方法。
最初的尝试是使所有指令完全独立。因此,例如,一个产品页面可能看起来如下所示(所有这些都带有自定义html-为清楚起见,省略了该页面):
<product>
<product-information></product-information>
<product-image></product-image>
<product-quantities></product-quantities>
<product-add-to-cart-button></product-add-to-cart-button>
</product>
如果指令需要数据(几乎所有指令都需要),则它们将使用服务来调用Web API并获取所需的数据。这种方法出现了一些问题。
因此,从第二遍开始,我就开始改变我的方法。现在,伪指令就像树形结构一样建立,每个伪指令都希望通过属性传递其数据要求。这是一个例子:
<product-image product-url="vm.product.imageUrl" ng-if="vm.product"></product-image>
这解决了API和数据库调用过多的问题#2,但向设计人员公开了太多内部信息。现在,设计人员必须知道传递product-url,并且必须了解在幕后有一个vm.product。他甚至可能需要了解一些angularJS(ng-if)。我已经看到这种模式甚至在带有Inputs的Angular2中也使用了很多。对于开发人员来说似乎很好,但对于设计人员使用的指令则不是,我们希望隐藏内部工作原理和复杂性,同时赋予设计人员控制布局的力量。
最后,我正在考虑使用父控制器来填充页面上可能需要的所有内容。然后,所有子指令都将像现在一样使用服务,但是已经加载了数据而不是调用API。指令保持简单,并且大多数都是独立的,但是它们的数据加载是由父级触发的。我对此唯一的问题是,由于设计器未使用指令,我们最终可能会加载很多未使用的数据。但是我觉得这是一个必要的权衡。
有没有人建立类似的东西,有没有我可能缺少的方法?
您可以在服务中使用组件树。从设计师友好开始:
<div ng-app="MyApp">
<product id="1">
<product-image></product-image>
</product>
</div>
像这样的东西工作:
angular.module('MyApp', [])
.factory('api', function($q){
return {
loadProduct: function(id){
return $q.when({
id: id,
imageUrl: 'http://i2.cdn.turner.com/cnnnext/dam/assets/160407085910-setsuna-main-overlay-tease.jpg'
})
}
};
})
.component('product', {
transclude: true,
bindings: {
id: '='
},
template: [
'<div ng-transclude></div>'
].join(''),
controller: function(api) {
var self = this;
this.$onInit = function() {
self.data = api.loadProduct(this.id);
};
}
})
.component('productImage', {
require: {
product: '^product'
},
bindings: {
},
template: [
'<pre>{{ $ctrl.url | json }}</pre>'
].join(''),
controller: function() {
var self = this;
this.url = false;
this.$onInit = function() {
this.product.data.then(function(data){
self.url = data.imageUrl;
})
};
}
})
看到此CodePen:http ://codepen.io/anon/pen/wGmEKP?editors=1011
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句