Question

所以我有这个自定义指令，你可以在下面看到。

myApp.directive('myDirective', function (testService) {
    return {
        restrict:'EA',
        link:function (scope, element, attr) {
           //defined the object
           var object = new object();
           testService.setObject(object);
    }
   }
});

myApp.directive('mySecondDirective', function (testService) {
    return {
        restrict:'EA',
        link:function (scope, element, attr) {
           //call the variable from previous custom directive
           console.log(testService.getobject()); -> always return undefined
    }
   }
});

这是我使用上述指令的html结构。

<my-directive></my-directive>

<my-second-directive></my-second-directive>

我希望从以前的自定义指令中检索包含object的{{1}}，但它总是返回new object()我想知道如何在不使用 require <的情况下执行此操作/ strong>也不是孤立范围 ..你们能帮助我吗？

更新我创建一个服务来提供设置和检索对象的设施，显然它返回undefined因为我这样设置自定义direcitve

undefined

这是服务

<my-second-directive></my-second-directive> <my-directive></my-directive>
事实上，我实际上设置了html标记，就像我上面提到的那样

define( ['services/services'], function(services) { 'use strict'; services.factory('testService', [function() { var me = this; var testObject = ''; return { setObject: function(object) { me.testObject = object; }, getObject: function() { return me.testObject; } } } ]); } );

那么你能就我该怎么做才能给我一些建议吗？
注意*传递对象实际工作我更喜欢使用服务，因为它很容易保留后者。问题是我如何使对象可以从另一个指令访问，即使在我在html标记中定义的指令中启动安装对象（设置对象），作为自己的html的最后位置？

更新这是 PLUNKER ，我已经为您了解了自己的问题

Answer 1

您可以通过触发自定义事件然后在第二个指令中侦听它来实现此目的。这是一个更新的plunker：http://plnkr.co/edit/512gi6mfepyc04JKfiep?p=info

从第一个指令广播事件：

app.directive('myDirective', function(testService) {
  return {
    restrict: 'EA',
    link: function(scope, elm, attr) {
      var object = {};
      testService.setObject(object);
      console.log('setting object');
      scope.$broadcast('objectSet');
    }
  }
});

...然后在第二个上听它：

app.directive('mySecondDirective', function(testService) {
  return {
    restrict: 'EA',
    link: function(scope, elm, attr) {
      scope.$on('objectSet', function(){
        console.log('retrieving object', testService.getObject());
      })
    }
  }
});

如果您想发出第二个指令要拾取的特定数据，您也可以将数据与事件一起传递。

Answer 2

<强> 1）。范围即可。由于您不想使用控制器和隔离范围，因此您只需将此对象设置为范围属性即可。

myApp.directive('myDirective', function() {
    return {
        restrict: 'EA',
        link: function(scope, element, attr) {

            var object = {};
            object.test = 21;

            // set object as scope property
            scope.object = object;
        }
    }
});

myApp.directive('mySecondDirective', function() {
    return {
        priority: 1,  // priority is important here
        restrict: 'EA',
        link: function(scope, element, attr) {
            console.log('Retrieve: ', scope.object);
        }
    }
});

确保你也在第二个指令上定义priority（只有当两个指令都应用于同一个元素时）才能确保它在适当的回合中被评估（应该大于{{1如果省略它是myDirective）。

<强> 2）。服务即可。另一个简单的解决方案是使用服务。您可以将自定义服务注入到两个指令中，并将其用于共享对象的存储。

Answer 3

扩展@gmartellino所说的。

在第二个指令中听到事件后你想做的任何事情都可以有一个callBack方法并使用它。

app.directive('mySecondDirective', function(testService) {
  return {
    restrict: 'EA',
    link: function(scope, elm, attr) {
      // what if I created like this ? 
      // define the test variable
      var test;

      scope.$on('objectSet', function(){
        //set the variable
        test = testService.getObject();
        console.log('retrieving object : ', testService.getObject());

        //Anything that you wanted to do 
        //after listening to the event 
        //Write a callBack method and call it
        codeToExecuteAsCallBack();
      })

      //then use this method to make a call back from the event 
      //and outside the event too.
      var codeToExecuteAsCallBack = function(){
        console.log(test);
      }
      codeToExecuteAsCallBack();
    }
  }
});

更新了plnkr link

将定义的对象传递给另一个自定义指令angularjs

3 个答案: