Question

我正在尝试编写一个自定义指令，以便＆＃34;创建＆＃34;仪表板小部件包括：

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

这是我的指令有多远：

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>

我被困在如何＆＃34;绑定＆＃34;模式的数据，以及我应该定义不同模式（或小部件模型）的位置。也许我的方法是错误的，所以我会非常感激一点方向。如果需要，我可以提供更多信息。

修改这是一个CodePen我是根据我到底有多远以及我认为我能实现的目标 - 也许它可以（或者应该）以不同的方式完成。

Answer 1

好的，所以我决定采用与我的工作略有不同的方式。这是我的解决方案：

<强>指令：该指令仅限于一个Element，并且有一个隔离的范围，它带有一些参数，数据为'&'，用于计算表达式（表达式在 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会初始化“小部件”＆＃39;从指令创建的元素如下：

<widget title-class="widget-title" 
        widget-title="Number of Users" 
        data="userData" 
        value-class="number-widget" 
        key-class="description">
</widget>

data属性从控制器调用$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
}

我希望这有助于某人，任何可能有更好的做法，但这符合我的需要。

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

1 个答案: