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

【问题标题】：How to feed data to a schema inside an AngularJS directive如何将数据提供给 AngularJS 指令中的模式
【发布时间】：2017-10-07 19:23:38
【问题描述】：

我正在尝试编写一个自定义指令，该指令将“创建”一个仪表板小部件，包括：

标题（小部件的名称）
模式（数据应该被建模或显示的方式，即它可以是注册的用户数量 - 一个数字，或者它可以是显示大多数用户的星期几的字符串等...）李>
数据（提供给架构的数据、数字、字符串或从数据库或数据源获取的任何内容）

这是我的指令所取得的进展：

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>

我被困在如何将数据“绑定”到架构上，以及我应该在哪里定义不同的架构（或小部件模型）。也许我的方法是错误的，所以一点方向将不胜感激。如果需要，我可以提供更多信息。

编辑： 这是我的CodePen，说明了我有多远以及我认为我可以实现的目标 - 也许可以（或应该）以不同的方式完成。

【问题讨论】：

什么是 schema() 和 data()。是在控制器里吗？？？据我了解，您只是试图将对象从视图范围绑定到指令范围。是这样吗？
能否提供 schema() 和 data() 返回示例。最好为它创建一个 codePen（使用静态值）。
我已经添加了一个例子，说明我已经完成了多远，因为我被卡住了，目前还没有完成，因此我写了这个问题。请检查我的编辑。

标签： angularjs angularjs-directive angularjs-scope widget dashboard

【解决方案1】：

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

指令： 该指令仅限于一个元素，并且有一个独立的范围，它接受一些参数，'&' 的数据，它评估一个表达式（表达式在 controller 中定义为如下所示的函数）和带有'@' 的类和标题，用于评估一个字符串（这些字符串在下面显示的 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 title-class="widget-title" 
        widget-title="Number of Users" 
        data="userData" 
        value-class="number-widget" 
        key-class="description">
</widget>

数据属性从控制器调用$scope变量

控制器： 控制器只是获取本示例中所需的数据，它是在$scope 上定义的一个名为$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
}

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

【讨论】：