Question

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

$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);
            }}; 
        },
   };
})

由于V1.5引入了单向<绑定，AngularJS团队建议避免双向=绑定。对于输入，请使用单向<绑定和属性@绑定。对于输出，使用表达式&绑定，这些绑定用作组件事件的回调。一般规则应该是永远不要从组件中更改父对象或数组属性。这样可以更容易地过渡到Angular 2+。

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

AngularJS设置服务

1 个答案: