如何将数据提供给 AngularJS 指令中的模式

Question

我正在尝试编写一个自定义指令，它将 "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 我所做的关于我有多远以及我认为我可以实现的目标 - 也许它可以（或应该）以不同的方式完成。

Answer 1

好的，所以我决定做一些与我认为可行的略有不同的事情。这是我的解决方案：

指令： 该指令仅限于一个元素，并具有一个独立的范围，该范围采用一些参数，带有 '&' 的数据，它计算一个表达式（该表达式在 控制器 中定义为函数如下所示）和类和带 '@' 的标题，它们计算一个字符串（这些字符串在下面显示的 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
}

我希望这对某人有所帮助，也许有更好的方法，但这适合我的需要。

如何将数据提供给 AngularJS 指令中的模式

How to feed data to a schema inside an AngularJS directive

angularjs

angularjs-directive

angularjs-scope

widget

dashboard