Question

我试图将一个指令的两个不同实例绑定到一个工厂。基本上我想要的是单击一个按钮并同时更新，反之亦然。我一直在用一个笨蛋来玩这个（这个时候有点乱）。如果有人可以看看它，看看我哪里出错了，我将不胜感激。有问题请问。提前谢谢。

HTML：

    <!DOCTYPE html>
<html ng-app="plunker">

  <head>
    <meta charset="utf-8" />
    <title>AngularJS Plunker</title>
    <script>document.write('<base href="' + document.location + '" />');</script>
    <link rel="stylesheet" href="style.css" />
    <script data-require="angular.js@1.3.x" src="https://code.angularjs.org/1.3.20/angular.js" data-semver="1.3.20"></script>
    <script src="app.js"></script>
  </head>

  <body>
    <peers-following-button></peers-following-button>
    <peers-following-button></peers-following-button>
  </body>

</html>

app.js：

    var app = angular.module('plunker', []);



app.controller('peerFollowingButtonController', peerFollowingButtonController);
    /*@ngInject*/
    function peerFollowingButtonController($scope,PeersHandlerService) {
        var vm = this;
        vm.isFollowing = PeersHandlerService.peerInformation.isFollowing;
         vm.followButtonTheme = 'blue-grey';
         vm.followButtonText = 'Follow';
        vm.followPeer = function() {
          vm.isFollowing = !vm.isFollowing
        };

        vm.followButtonTheme = 'blue-grey';



        $scope.$watch(function() {
            return vm.isFollowing;
        }, function(newVal) {

            if(newVal == true || newVal == "true") {
                vm.followButtonTheme = 'green';
                vm.followButtonText = 'Following';
            } else {
                vm.followButtonTheme = 'blue-grey';
                vm.followButtonText = 'Follow';
            }
        });

    }

app.directive('peersFollowingButton', peerFollowingButton);
    /*@ngInject*/
    function peerFollowingButton() {
        return {
            restrict: 'E',
            template: '<button id="peer-follow-toolbar" style="background-color:{{vm.followButtonTheme}}" class="right white-text" ng-click="vm.followPeer()"> {{vm.followButtonText}}</button>',
            scope:{
                peerUsername: '='
            },
            controller: 'peerFollowingButtonController',
            controllerAs: 'vm',
            bindToController:true
        };
    }


app.factory('PeersHandlerService', peersHandlerService);
    /*@ngInject*/
    function peersHandlerService($q) {
        var service = {
            peerInformation: {
              isFollowing:false
            }
        };

        return service;

    }

plunkr：http://plnkr.co/edit/dTZ5Y3qtvyd5RnkqyIfX?p=preview

Answer 1

我是个白痴。我刚刚从以下按钮指令中删除了隔离范围，它可以工作。抱歉浪费时间。

将两个指令实例中的值绑定到一个工厂

1 个答案: