Question

在我的html页面中，我有一个按钮和一个指令代码段，如下所示：

<button ng-click="showProfile();"></button>
<profile ng-if="isProfile==true"></profile>

在我的控制器中，我初始化了$scope.isProfile variable = false，并通过按钮调用了函数：

$scope.showProfile = function(contact) {
    $scope.contact = contact; // this object needs to get passed to the controller that the directive initiates, but how??
    $scope.isProfile = true;
};

在我的应用程序中，我有一个如此定义的指令......

app.directive('profile', function () {
    return {     
     templateUrl: '/contacts/profile',
     restrict: 'ECMA',   
     controller: contactsProfileController,
     link:function(scope, element, attrs) {  
                console.log('k');
     }
   };
 });

一切正常，但我无法弄清楚如何将$scope.contact对象传递给指令引用的控制器。
我已经尝试将scope:scope添加到指令的返回{}但没有运气。我是否需要在link函数中执行某些操作？我花了一整天的时间阅读指令并且筋疲力尽，所以任何提示都会非常感激!!!

提前感谢您的帮助！

以下是从指令中调用的控制器的样子：＆/ p>

var contactsProfileController = function($scope,contact) {
     $scope.init = function() {
        console.log($scope.contact); //this should output the contact value from the showProfile function.
     };
 ....
 }

Answer 1

在你的指令上试试这个。

<profile ng-if="isProfile==true" contact="contact"></profile>

并将其添加到范围

app.directive('profile', function () {
    return {     
     templateUrl: '/contacts/profile',
     restrict: 'ECMA',   
     scope: {
          contact: '=contact'
     }
     controller: contactsProfileController,
     link:function(scope, element, attrs) {  
                console.log('k');
     }
   };
 });

但是我从你的代码中看到了一些问题：
- 你的showProfile函数期望一个没有从button指令传递的“contact”参数，因此它将是未定义的。
- 您正在contactProfileController控制器上注入“联系”依赖项。您是否有使用该名称申报的服务/工厂？

而不是联系：'@ contact'，请联系：'= contact'

Answer 2

由于您的自定义指令是＆＃34;组件＆＃34;在各种情况下，最好使用隔离范围并通过属性传递必要的数据（即contact）。

E.g：

<button ng-click="showProfile(...)"></button>
<profile contact="contact" ng-if="isProfile"></profile>

$scope.showProfile = function (contact) {
    $scope.contact = contact;
    $scope.isProfile = true;
};

.directive('profile', function () {
    return {     
        restrict: 'ECMA',
        scope: {contact: '='}
        templateUrl: '/contacts/profile',
        controller: contactsProfileController
    };
});

然后，该属性将在范围内提供（例如contactsProfileController的$ scope）：

var contactsProfileController = function ($scope) {
    $scope.$watch('contact', function (newValue) {
        // The `contact` has changed, do something...
        console.log($scope.contact);
    });
    ...
};

Answer 3

您的回复都非常有用，我在阅读您的帖子后能在几分钟内完成工作。非常感谢你!!!

将contact =“contact”添加到指令占位符是关键，就像将范围对象添加到实际指令代码一样。

所以我最终得到了：

 <profile ng-if="isProfile===true" contact="contact"></profile>

和

.directive('profile', function () {
    return {     
     templateUrl: '/contacts/profile',
     restrict: 'ECMA',   
     controller: contactsProfileController,
     scope: {contact: '='},
     link:function(scope, element, attrs) {  

     }
   };
 });

当用户单击按钮时显示指令的内容 - 几乎正常工作

3 个答案: