2

在 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 指令上使用范围和它自己的控制器，并且仍然能够将数据传递给 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>

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

编辑：这是一个展示我正在尝试做的事情的 plunker：

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

4

3 回答 3

0

您可以使用 $scope.$parent.myvar 从指令中访问父范围。

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

但是，这并不能保证 myvar 来自与 UserShowCtrl 相同的范围，因为“profile”指令和 UserShowCtrl 范围之间的任何范围都可能覆盖“myvar”。

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

  1. 通过传递给您的指令的属性。您已经使用此方法将“用户”和“显示”从父范围导入指令的隔离范围。

  2. 需要另一个指令。当你使用 'require: ^UserShow' 时，你指定你的 'profile' 指令需要另一个指令作为依赖。'^' 表示它将在当前元素上搜索指令，或者在 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>
于 2014-06-19T17:57:52.887 回答
0

我不太确定你的目标是什么。

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

所以你面前已经有了一个解决方案......所以如果这还不够“好”，那么你的问题中就会缺少一些东西。

这是一个插图：http ://plnkr.co/edit/qEH2Pr1Pv7MTdXjHd4bD?p=preview

但是，如果您在创建子范围的外部模板中使用某些东西，将其绑定为“值”是不够的，您需要有一个 . 在那里。

但这就是问题所缺少的地方，如果您分享您的 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>
于 2014-06-19T17:59:59.737 回答
0

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

就像是

  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    

  }]);

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

于 2014-06-19T17:45:53.997 回答