Question

在下面的代码中，您可以看到我有一个计数器组件，可以在递增和递减时触发事件，并且这些组件绑定到显示的输出。这些事件在$ rootScope上，因此可以在其他组件上听到它们。什么不起作用是我的watchercomponent上的数据绑定。如果您查看控制台，它会正确接收事件及其数据，甚至更新消息属性，但视图中没有更新。是什么赋予了？以下是我的代码：

的script.js

angular.module('testApp', []).component('counter', {
bindings: {
    input: '<',
    output: '&'
},
controller: function ($rootScope, $attrs) {
    this.output = $attrs.input;

    this.increment = function increment() {
        this.output++;
        console.log("event from counter fired");
        $rootScope.$emit('eventfromcounter', 'increment');

    }

    this.decrement = function decrement() {
        this.output--;
        console.log("event from counter fired");
        $rootScope.$emit('eventfromcounter', 'decrement');

    }

},
template: function ($element, $attrs) {
    return [
    '<input type="text" ng-model="$ctrl.output">',
    '<button type="button" ng-click="$ctrl.decrement();">-</button>',
    '<button type="button" ng-click="$ctrl.increment();">+</button>',
    ].join('');
}
}).component('watchercomponent', {
    bindings: {
        message : '&'
    },
    controller: function ($rootScope, $attrs)
    {
        this.message = 'waiting for event';
        $rootScope.$on('eventfromcounter', function (event, args)
        {
            console.log("recieved at anothercomponent : " + event.name + " : " + args);
            this.message = args;
            console.log("message : " + this.message);
        });
    },
    template: function($element, $attrs)
    {
        return [
            '<br/><span>watchercomponent : {{$ctrl.message}}</span>'
        ].join('');
    }
});

的index.html

<html>

  <head>
    <script src="angular.min.js"></script>
    <script src="script.js"></script>
  </head>

  <body>
    <div ng-app = "testApp">
      <counter input="3"></counter>
      <watchercomponent></watchercomponent>
    </div>
  </body>

</html>

Plunker此处。

也是$ rootScope事件在组件之间共享事件/数据的良好做法？如果没有人能指出我正确的方向吗？

由于

Answer 1

您的问题依赖于this的使用。在JavaScript中，每个函数内的上下文都是不同的，因此this的值引用了不同的东西。这就是您希望使用this保留对控制器var ctrl = this;值的引用的原因。

<强> JS

    angular.module('testApp', []).component('counter', {
    bindings: {
        input: '<',
        output: '&'
    },
    controller: function ($rootScope, $attrs) {
        this.output = $attrs.input;

        this.increment = function increment() {
            this.output++;
            console.log("event from counter fired");
            $rootScope.$broadcast('eventfromcounter', 'increment');

        }

        this.decrement = function decrement() {
            this.output--;
            console.log("event from counter fired");
            $rootScope.$broadcast('eventfromcounter', 'decrement');

        }

    },
    template: function ($element, $attrs) {
        return [
        '<input type="text" ng-model="$ctrl.output">',
        '<button type="button" ng-click="$ctrl.decrement();">-</button>',
        '<button type="button" ng-click="$ctrl.increment();">+</button>',
        ].join('');
    }
}).component('watchercomponent', {
    controller: function ($rootScope, $attrs)
    {
        var ctrl = this; //Keep a reference to controller's context

        ctrl.message = 'waiting for event';
        $rootScope.$on('eventfromcounter', function (event, args)
        {
            console.log("recieved at anothercomponent : " + event.name + " : " + args);
            ctrl.message = args; //Use controller's context, not function context
            console.log("message : " + ctrl.message);
        });
    },
    template: function($element, $attrs)
    {
        return [
            '<br/><span>watchercomponent : {{$ctrl.message}}</span>'
        ].join('');
    }
});

工作plunkr：https://plnkr.co/edit/v4VgggsOx1xWsdRnI8hU?p=preview

AngularJS组件数据绑定无法正常工作

1 个答案: