如何将数据提供给 AngularJS 指令中的模式
How to feed data to a schema inside an AngularJS directive
我正在尝试编写一个自定义指令,它将 "create" 仪表板小部件包括:
- 标题(小部件的名称)
- 模式(数据应该被建模或显示的方式,即它可以是注册用户的数量 - 一个数字,或者它可以是显示大多数用户星期几的字符串等...)
- 数据(提供给架构的数据、数字、字符串或从数据库或数据源获取的任何内容)
这是我的指令执行到的程度:
app.directive('widget', function () {
return {
restrict: 'E',
scope: {
title: '@',
schema: '&',
data: '&'
},
template: '<div>' +
'<span class="widget-title">{{title}}</span>' +
'<div schema="schema()" data="data()"></div>' +
'</div>'
}})
和我的 html:
<widget title="Number of users" options="numberWidget" data="userData">
</widget>
我对如何 "bind" 数据到模式,以及我应该在哪里定义不同的模式(或小部件模型)感到困惑。也许我的方法是错误的,所以我将不胜感激。如果需要,我可以提供更多信息。
编辑:
这是一个 CodePen 我所做的关于我有多远以及我认为我可以实现的目标 - 也许它可以(或应该)以不同的方式完成。
好的,所以我决定做一些与我认为可行的略有不同的事情。这是我的解决方案:
指令:
该指令仅限于一个元素,并具有一个独立的范围,该范围采用一些参数,带有 '&'
的数据,它计算一个表达式(该表达式在 控制器 中定义为函数如下所示)和 类 和带 '@'
的标题,它们计算一个字符串(这些字符串在下面显示的 HTML 中定义)
app.directive('widget', ['$log', function ($log) {
return {
restrict: 'E',
scope: {
data: '&',
valueClass: '@',
keyClass: '@',
widgetTitle: '@',
titleClass: '@'
},
template:
'<div><span class="{{titleClass}}">{{widgetTitle}}</span></div>' +
'<div><span class="{{valueClass}}">{{data().value}}</span></div>' +
'<div><span class="{{keyClass}}"> {{data().key}}</span></div>',
link: function (scope, element, attrs) {
scope.$watch('data', function (newValue, oldValue) {
if (newValue !== oldValue) {
scope.data = newValue;
$log.info('updating data');
}
}, true);
}
};
}]);
HTML:
HTML 然后初始化从指令创建的 'widget' 元素,如下所示:
<widget title-class="widget-title"
widget-title="Number of Users"
data="userData"
value-class="number-widget"
key-class="description">
</widget>
数据属性从控制器调用一个$scope
变量
控制器:
控制器只是获取本例中所需的数据,它是一个在 $scope
上定义的虚拟 object,名为 $scope.userData
:
app.controller('dashboardCtrl', [
'$scope', function ($scope) {
$scope.userData = {
key: 'Total Users',
value: 100
};
}
]);
CSS:
CSS 显然定义了 HTML 元素中使用的 类,这取决于样式的偏好,但仅针对我的示例,我将展示它们:
.widget-title {
//whatever you need
}
.number-widget {
//whatever you need
}
.description {
// whatever you need
}
我希望这对某人有所帮助,也许有更好的方法,但这适合我的需要。
我正在尝试编写一个自定义指令,它将 "create" 仪表板小部件包括:
- 标题(小部件的名称)
- 模式(数据应该被建模或显示的方式,即它可以是注册用户的数量 - 一个数字,或者它可以是显示大多数用户星期几的字符串等...)
- 数据(提供给架构的数据、数字、字符串或从数据库或数据源获取的任何内容)
这是我的指令执行到的程度:
app.directive('widget', function () {
return {
restrict: 'E',
scope: {
title: '@',
schema: '&',
data: '&'
},
template: '<div>' +
'<span class="widget-title">{{title}}</span>' +
'<div schema="schema()" data="data()"></div>' +
'</div>'
}})
和我的 html:
<widget title="Number of users" options="numberWidget" data="userData">
</widget>
我对如何 "bind" 数据到模式,以及我应该在哪里定义不同的模式(或小部件模型)感到困惑。也许我的方法是错误的,所以我将不胜感激。如果需要,我可以提供更多信息。
编辑: 这是一个 CodePen 我所做的关于我有多远以及我认为我可以实现的目标 - 也许它可以(或应该)以不同的方式完成。
好的,所以我决定做一些与我认为可行的略有不同的事情。这是我的解决方案:
指令:
该指令仅限于一个元素,并具有一个独立的范围,该范围采用一些参数,带有 '&'
的数据,它计算一个表达式(该表达式在 控制器 中定义为函数如下所示)和 类 和带 '@'
的标题,它们计算一个字符串(这些字符串在下面显示的 HTML 中定义)
app.directive('widget', ['$log', function ($log) {
return {
restrict: 'E',
scope: {
data: '&',
valueClass: '@',
keyClass: '@',
widgetTitle: '@',
titleClass: '@'
},
template:
'<div><span class="{{titleClass}}">{{widgetTitle}}</span></div>' +
'<div><span class="{{valueClass}}">{{data().value}}</span></div>' +
'<div><span class="{{keyClass}}"> {{data().key}}</span></div>',
link: function (scope, element, attrs) {
scope.$watch('data', function (newValue, oldValue) {
if (newValue !== oldValue) {
scope.data = newValue;
$log.info('updating data');
}
}, true);
}
};
}]);
HTML: HTML 然后初始化从指令创建的 'widget' 元素,如下所示:
<widget title-class="widget-title"
widget-title="Number of Users"
data="userData"
value-class="number-widget"
key-class="description">
</widget>
数据属性从控制器调用一个$scope
变量
控制器:
控制器只是获取本例中所需的数据,它是一个在 $scope
上定义的虚拟 object,名为 $scope.userData
:
app.controller('dashboardCtrl', [
'$scope', function ($scope) {
$scope.userData = {
key: 'Total Users',
value: 100
};
}
]);
CSS: CSS 显然定义了 HTML 元素中使用的 类,这取决于样式的偏好,但仅针对我的示例,我将展示它们:
.widget-title {
//whatever you need
}
.number-widget {
//whatever you need
}
.description {
// whatever you need
}
我希望这对某人有所帮助,也许有更好的方法,但这适合我的需要。