Javascript 从指令获取控制器中$scope的值

在我的指令中，我从后端获取了一些数据，如下所示：

var monster_info = angular.element(this).find("img").attr("title");
                    $http.get("lib/terrain.php", {params: { monster_data:monster_info}}).success(function(data) {
                            console.log(data);
                    });

  $rootScope.$broadcast('fishChange', fishValue);

我希望这些数据出现在我的站点上，所以我尝试在我的控制器中声明一个类似这样的变量：$scope.fish=[]

然后我在指令中这样分配数据值：$scope.fish=data

但是没有打印出来。控制器和指令之间的通信是如何工作的？我应该如何共享此类数据

以下是我的全部指示：

angular.module('gameApp_directives').
  directive('mapActivity', function($http) {
    return {
        restrict: 'A',
        link: function(scope, element, attrs) {
            scope.$watch('tabledata', function() {

             angular.element('.click#1').addClass('dotted').html($("<img src='images/dot.png'>"));          
                var j = null;
                for(var i = 1; i <= 4; i++)
                {
                    $.ajax({
                        type: 'GET',
                        url: 'lib/terrain.php',
                        dataType: 'html',
                        data: {i: i},
                        success: function(data) {
                            var randomRuta = Math.floor((Math.random() * 100) + 1);
                            angular.element('.click#'+randomRuta).addClass('monster').html($("<img src='images/blackdot.png' title='"+data+"'>"));                  
                        },
                        error: function(xhr, ajaxOptions, thrownError) { alert(thrownError); }
                    });
                    j=i;
                }  
                angular.element('.click').click(function() {
                    if(angular.element(this).hasClass('monster'))
                    {
                        var monster_info = angular.element(this).find("img").attr("title");
                        $http.get("lib/terrain.php", {params: { monster_data:monster_info}}).success(function(data) {
                                console.log(data);
                        });



                        /*if(confirm('Vill du anfalla monster?'))
                        {
                            alert("Du vann");
                            angular.element('.click.monster'+j).empty();
                            angular.element('.click.monster').removeClass('monster'+j);

                            angular.element('.click.dotted').empty();
                            angular.element('.click.dotted').removeClass('dotted');
                            angular.element(this).addClass('dotted');
                            angular.element('.click.dotted').html($('<img src="images/dot.png">'));
                        }*/
                    }
                    else
                    {
                        angular.element('.click.dotted').empty();
                        angular.element('.click.dotted').removeClass('dotted');

                        if(!angular.element(this).hasClass('dotted'))
                        {
                            angular.element(this).addClass('dotted');
                            angular.element(this).html($('<img src="images/dot.png">'));
                        }
                    }
                });
            });                     
        }
    };
});

有人能帮我吗

这是我的HTML

<div id="layout_game">
<div ng-controller="gameCtrl">
<div ng-if='resultLoaded' id="rightcontent_game">
    <table ng-bind-html="safeHtml()" map-Activity>
    </table>
</div>

<div id="leftcontent_game">
    <div id="leftcontent_top">
        <ul>
            <li><a href="#">Vildmarken</a></li> <li> | </li> <li><a href="#">Marknaden</a></li> <li> | </li> <li><a href="#">Värdshuset</a></li>
        </ul>
    </div>
    {{fish}}
</div>
</div>
</div>

{{fish}

我只想广播指令中的一个事件，如下所示：

var monster_info = angular.element(this).find("img").attr("title");
                    $http.get("lib/terrain.php", {params: { monster_data:monster_info}}).success(function(data) {
                            console.log(data);
                    });

  $rootScope.$broadcast('fishChange', fishValue);

然后在控制器中侦听该事件：

  $scope.$on('fishChange', function(event, fishValue) {

   // Do whatever you want here

});

---

指令与其父控制器之间的通信可以以几种不同的方式工作，具体取决于如何在指令定义对象中定义

范围

属性

默认值为

scope:false

，这是您在上面的

mapActivity

指令示例中隐式使用的值，因为您没有指定一个值。（对于其他模式，请参见“范围”设置下的）

这意味着不会创建新的作用域-指令将通过作为链接函数的第一个参数传递的

scope

参数直接访问包含控制器的$scope

您的代码可能不起作用，原因很简单，您在指令中编写了

$scope.fish=data

，而不是

scope.fish=data

（没有美元符号）。实际上，查看您发布的指令代码，您不会尝试在任何地方分配给

fish

属性。也许你只是把它写在例子里了

回复：使用“$rootScope.$broadcast（）” 我个人建议不要使用lulu88建议的

$rootScope.broadcast（）

方法。我将保留$rootScope上的广播，仅适用于两个组件之间没有简单、直接通信方式的情况。在这种情况下，正如我所解释的，有一个非常简单的方法

从

$broadcast（名称，args）； 将事件名称向下分派给所有子作用域（及其子作用域），通知已注册的$rootScope.Scope侦听器

事件生命周期从调用$broadcast的作用域开始。侦听此作用域上的name事件的所有侦听器都会收到通知。之后，事件传播到当前作用域的所有直接和间接作用域，并沿途调用所有已注册的侦听器。无法取消该事件

因此，如果在$rootScope上调用$broadcast（），则会将事件传播到应用程序中的每个作用域。这对于除全局应用程序范围的事件之外的任何事件都是不必要的-典型的事件是用户登录或注销。

您可能知道，“输入”或“选择”HTML组件可以使用ng模型向控制器报告其状态。事实上，我们也可以使我们自己的指令支持相同的特性

该过程可分解为：

将“require:'ngModel'”添加到指令的js中，让ng模型在html模板中可用

使用ngModelCtrl.$formatters方法将模型值转换为视图值

使用ngModelCtrl.$render方法更新UI以反映视图值

使用ngModelCtrl.$parsers方法将视图值转换为模型值

使用ngModelCtrl.$setViewValue方法在UI更改时更新视图值

想象整个循环

<realModel> → ngModelCtrl.$formatters(realModel) → $viewModel ↓ ↑ $render() ↓ ↑ UI changed ↓ ngModelCtrl.$parsers(newViewModel) ← $setViewValue(newViewModel) → ngModelCtrl.$formatters（realModel）→ $视图模型 ↓ ↑ $render（） ↓ ↑ 用户界面改变 ↓ ngModelCtrl.$parsers（newViewModel）← $setViewValue（newViewModel）

---

只是想知道你在创建指令时没有指定控制器是否有任何原因请参见“创建通信指令”@user1441287:什么意思？你也可以发布html吗？@R.a.Lucas:检查我更新的问题。如果不真的在指令中进行后端调用，服务更适合于此。在您可以触发事件后，创建一个对话指令，或者在您的指令中，您可以访问

范围

！非常感谢：-）。这是一个经批准的解决方案吗？是的，我一直在使用：）它非常有用，例如，当您希望从服务获取数据到控制器时。对于在控制器之间共享数据也很有用。我试图找到一些很好的文档来解释这一点，但正如您所知，angularJS文档不是最好的。滚动到此页面底部：如何更新$rootScope.$broadcast（'fisChange'，fishValue）的值；要创建一个新值？请不要这样做，还有下面提到的其他解决方案，或者使用服务在作用域之间进行通信。为什么要将事件发送到每个范围？它通常是为更高的逻辑和破坏交易的东西保留的，或者当没有简单的替代品时。