如何將數據饋送到架構中的AngularJS指令

我想寫一個自定義的指令，將「創建」儀表板窗口小部件，包括內部：如何將數據饋送到架構中的AngularJS指令

標題（widget的名稱）
模式（數據應該被建模或顯示的方式，即它可以是註冊的用戶數量 - 一個數字，或者它可以是顯示大多數用戶的星期幾等的字符串......）
Data（the數據饋送到模式，數字，字符串或任何從數據庫或數據源提取的數據）

這是多遠我與我的指令有：

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我做的，我有多遠，什麼我想我可以做到 - 也許它可以（或應該）做不同的。

來源

2017-05-09 w0ns88

什麼是schema（）和data（）。它在控制器中嗎？從我的理解你只是試圖將一個對象從視圖範圍綁定到指令範圍。是嗎？ –

可以提供schema（）和data（）返回樣本。最好爲它創建一個codePen（帶有靜態值）。 – mastermind

我已經添加了一個例子，我與它有多遠，因爲我卡住了，所以我寫了這個問題。檢查我的編輯。 – w0ns88

好的，所以我決定稍微改變一下我的工作方式。這是我的解決方案：

指令： 該指令被限制在一個Element和具有隔離範圍這需要一些參數，與'&'數據，其評估的表達式（表達在控制器定義如下所示的函數）和類和標題用'@'，其評估的字符串（這些字符串將在下文中示出的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 
}

我希望這可以幫助別人，任何也許有更好的方式做，但這符合我的需求。

來源

2017-05-11 08:48:28 w0ns88

如何將數據饋送到架構中的AngularJS指令

回答

相關問題