AngularJS 从服务设置指令范围变量

Question

好的，所以我正在尝试制作一个简单的 聊天小部件 指令，我希望它可以 动态地 在我想要的任何地方创建我的应用程序，即我不想要硬编码的解决方案。所以我希望指令是从服务创建的，因此它的范围变量是通过服务助手方法设置的。我想我在一些 angularjs material 指令中看到了一些这样的例子，例如我想做这样的事情：

$mdToast.simple()
  .textContent('Marked as read')
  .action('UNDO')

但我的聊天小部件将像：

$chatWidget.setParent(parent).setUser(user).setMessages(messages);

到目前为止，这是该指令的一个极其简化的版本：

        angular
    .module('app')
    .directive('reChat', function ($chatWidget) {
        return {
            restrict: 'E',
            replace: true,
            template: 

    '<div id="chat-widget-container"><div id="chat-widget-header">User.name</div>'+
    '<div id="chat-widget-body"<div ng-repeat="message in reMessages"><div>' +
    '<p> {{message.body}} </p></div></div></div>' +
      '<textarea ng-model="messageToSend" id="message-to-send" placeholder ="Type your message" rows="3"></textarea>' +
      '<button class="btn btn-default" ng-click="sendMessage()">Send</button></div>'

,
            scope: {
                reMessages: '=',
                reParent: '<',
                reUser: '<'
            },
            link: function (scope, element, attrs) {

                scope.sendMessage = function () {
                    //logic here...
                };
        };
    });

那么如何从以下工厂设置上面指令中的三个范围变量（reMessages、reParent、reUser）？

angular
.module('app')
.factory('$chatWidget', function ($document, $compile, $controller, $http, $rootScope, $q, $timeout) {
        return {
            // functions
        }
    })

非常感谢任何帮助。

Answer 1

通常，要从服务设置指令范围属性，只需分配它：

app.directive('reChat', function ($chatWidget) {
    return {
        scope: {
            reMessages: '=',
            reParent: '<',
            reUser: '<'
        },
        link: function (scope, element, attrs) {                
            scope.reMessages=$chatWidget.reMessages;
            //OR asynchronously
            $chatWidget.getReMessages()
              .then(function(reMessages) {
                scope.reMessages = reMessages;
            }).catch(function(error) {
                console.log(error);
            }}; 
        },
   };
})

由于 one-way < 绑定是在 V1.5 中引入的，AngularJS 团队建议避免使用 two-way = 绑定。对于输入，使用 one-way < 绑定和属性 @ 绑定。对于输出，使用表达式 & 绑定作为组件事件的回调。一般规则应该是永远不要更改组件的父对象或数组属性。这将使过渡到 Angular 2+ 更容易。

有关详细信息，请参阅 AngularJS Developer Guide - Component-based application architecture。

AngularJS 从服务设置指令范围变量

AngularJS setting directive scope variables from a service

angularjs

angularjs-directive

angularjs-scope

widget

angularjs-factory