Question

在我的控制器中：

myApp.controller('homeCtrl', function($scope, $rootScope, $state,  'red';
    $rootScope.$on('new_story', function(event, data) {
        $scope.cardObj = {key:'value'};
    });
});

在我的HTML中：

<div clickmeee ></div>
<div id="feedContainer" card='{{cardObj}}'> </div>

在我的指令中：

myApp.directive('clickmeee', function($compile, $rootScope) {

            return {
                restrict: 'A',
                scope: {
                    card: '@'
                },
                link: function(scope, element, attrs) {
                    element.bind('click', function() {   
                            scope.$watch('card', function(newVal, oldVal) {
                                alert(scope.card);
                            });         
                            });
                        }
                    };
                });

如何将数据从控制器传递到此指令。我编译了一些html并将其添加到div中。所有这些都已整理出来，但我需要一些来自我试图通过的对象的数据。

任何帮助??

Answer 1

坏消息。你在所有方面都做错了。

<强>首先

card='{{cardObj}}' >

这个应该放在

中

<div clickmeee ></div>

因此，您可以在指令注册中将其作为绑定范围变量

<强>其次

如果您设法使用＆＃39; @＆＃39;语法

card: '@'

它会将您的输入转换为字符串，而不是绑定范围。使用＆＃39; =＆＃39;代替。

最后

你不需要在这里使用手表：

scope.$watch('card', function(newVal, oldVal) {
    alert(newVal);
});

因为scope.card通过＆＃39; =＆＃39;绑定。连接器。只需简单使用alert（scope.card）。（需要警告你警告对象不是一个好主意）

我在这里尝试了您的代码：plunker。使用cardObj作为字符串更改了一个litte位，以便于演示。它与你的作品相符吗？

Answer 2

您的代码中存在几个问题：

您定义名为＆＃39; card＆＃39;的范围属性，但您使用cardObj代替
你使用完全没必要的手表。更糟糕的是：每次点击元素时都会创建一个新手表
您没有在clickmeee元素上定义任何card属性。相反，您将它放在另一个未应用指令的元素上
您通过＆＃39; @＆＃39;传递了该属性。这样可行，但该指令将接收一个字符串，其中包含JSONified对象，而不是对象本身
您没有告诉我们您在哪里发出将在控制器范围内初始化cardObj的事件

以下是显示代码工作版本的plunkr。

另外，请注意使用bind('click')是一个坏主意。您最好在指令中使用模板并在模板中使用ng-click，或者根本不使用指令，只需直接在div元素上使用ng-click。

Answer 3

您应该观看card对象：

myApp.directive('clickmeee', function() {

    return {
        restrict: 'A',
        scope: {
            card: '@'
        },
        link: function(scope, element, attrs) {
            scope.$watch('card', function(value) {
                console.log(value);
            });         
        }
    };
});

和

<div clickmeee id="feedContainer" card='{{cardObj}}'> </div>

每当控制器更改cardObj时，都会触发card上的指令监视：

$scope.$apply(function() {
    $scope.cardObj = "test";
}

将数据从控制器传递到指令的链接？

3 个答案: