Question

在angular.js中，指令控制器是否可以访问加载它的页面控制器中的数据？

/**
 * Profile directive
 */
    .directive('profile', function () {
        return {
            restrict: 'E',
            replace: true,
            templateUrl: '/partials/users/_profile.html',
            scope: {
                user: '=',
                show: '=?'
            },
            controller: function($scope, $rootScope){
                $scope.show = angular.isDefined($scope.show) ? $scope.show : { follow: true, link: true };
                $scope.currentUser = $rootScope.currentUser;

                //do stuff here and then set data in UserShowCtrl
            }
        };
    });

从使用UserShowCtrl控制器的<profile user="user"></profile>调用./users/show.html方法。

无论如何我可以使用自己的控制器在profile指令上使用scope并且仍然可以将数据传递给UserShowCtrl吗？

即使配置文件可以隔离到它自己的功能，它仍然需要在UserShowCtrl控制器的页面级别设置一些数据。

这是_user.html加载<profile>指令的地方。该页面的数据由UserShowCtrl提供，并且有一些集合会在发生事件时更新，例如跟随用户。

<ol class="following" ng-show="showConnections == 'following'">
    <li ng-repeat="following in user.following">
        <profile user="connections[following]"></profile>
    </li>
</ol>

现在_profile.html中发生了ng-click="follow(user)">。我希望能够让指令处理这个，但也更新UserShowCtrl中的集合。

编辑：这是一个了解我正在尝试做什么的人：

http://plnkr.co/edit/9a5dxMVg9cKLptxnNfX3

Answer 1

您需要使用服务才能在控制器，指令，服务之间共享任何信息

类似

  angular.module('myapp',[]).
  service('myservice',function(){
      return {a:'A',b:'B'}
  }).
  controller('mycontroller',['myservice',function(myservice){

        //do someting with myservice    

  }]).
  directive('mydirective',['myservice',function(myservice){

        //do someting with myservice    

  }]);

控制器和指令通过服务访问相同的数据

Answer 2

您可以使用$ scope。$ parent.myvar。

从您的指令访问父作用域

myvar将在父范围内解析，这意味着原型范围继承用于解析变量。

但是，这并不保证myvar来自与UserShowCtrl相同的范围，因为它可能是＆＃39; profile＆＃39;之间的任何范围。指令和UserShowCtrl的范围可以覆盖＆＃39; myvar＆＃39;。

更好的解决方案是使用指令到指令的通信。指令通常有两种沟通方式：

通过传递到指令的属性。您已经使用此方法导入用户＆＃39;和＆＃39;显示＆＃39;从父范围到您指令的孤立范围。

需要另一个指令。当您使用＆＃39;要求：^ UserShow＆＃39;时，您指定的是＆＃39;个人资料＆＃39;指令需要另一个指令作为依赖。＆＃39; ^＆＃39;意味着它将搜索当前元素的指令，或DOM树上的任何父元素。然后，UserShow的控制器将传递给您的链接功能：

 .directive('UserShow', function () {
  return {
        restrict: 'E',
        controller: function($scope){
              $scope.myvar = 'test';
              this.setMyVar = function(var) {
                  $scope.myvar = var;
              }
            }
        };
    });

.directive('profile', function () {
    return {
        restrict: 'E',
        replace: true,
        templateUrl: '/partials/users/_profile.html',
        require: '^UserShow',
        scope: {
            user: '=',
            show: '=?'
        },
        controller: function($scope, $rootScope){
        },
        link: function(scope, element, attr, UserShowCtrl) {
            UserShowCtrl.setMyVar('hello world!);
        }

    };
});

HTML：

  <user-show>
       <profile>...</profile>
  </user-show>

Answer 3

我不太清楚你的追求。

您已经有2个双向数据绑定，这意味着如果您在指令中更改用户，那么它也将流向外部范围。

所以你已经有了解决方案...... 所以，如果那不够好，那么你的问题就会缺少。

以下是插图：http://plnkr.co/edit/qEH2Pr1Pv7MTdXjHd4bD?p=preview

但是，如果您在外部模板中使用创建子范围的内容，请将其绑定为＆＃34; value＆＃34;没有足够的，你需要有一个。在那里。

但这就是问题遗漏的地方，如果你分享你的show.html，我可以找到范围分解的地方并解释原因......

demo.js的相关来源：

app.directive('profile', function () {
        return {
            restrict: 'E',
            replace: true,
            template: '<div><input type="text" ng-model="user"></input></div>',
            scope: { //defines an isolate scope.
                user: '=',
                show: '=?'
            },
            controller: function($scope, $rootScope){
                $scope.show = angular.isDefined($scope.show) ? $scope.show : { follow: true, link: true };
                $scope.currentUser = $rootScope.currentUser;

                $scope.user = "Changed by scope!";
                //do stuff here and then set data in UserShowCtrl
            }
        };
    });

app.controller('UserShowCtrl', function($scope) {
  $scope.value = "Value set outside!";

  $scope.alertValue = function() {
    alert($scope.value);
  }
});

home.html的相关来源：

<div ng-controller="UserShowCtrl">
  {{ value }}
  <profile user="value"></profile>
  <button ng-click="alertValue()">ALERT!</button>
</div>

在angular.js中，指令控制器可以访问加载它的页面控制器中的数据吗？

3 个答案: