如何从动态创建的指令访问控制器作用域

Question

Basically I am trying to access controller scope property from directive's controller function. 基本上，我试图从指令的控制器功能访问控制器作用域属性。 I am doing it through $parent property. 我正在通过$ parent属性。 It works fine for static directive but not for dynamically created directive. 它适用于静态指令，但不适用于动态创建的指令。 please have a look on my plunker 请看看我的矮人

Dynamic Directive

In a plunker, when I click on folder with Id = 1. all goes good and folder path shows as "1 path". 在插件中，当我单击ID = 1的文件夹时，一切正常，文件夹路径显示为“ 1 path”。 Same goes for folder with Id = 2. But it does not work for dynamically appended folder with Id = n Id = 2的文件夹也是如此。但不适用于Id = n的动态附加文件夹

I am somewhat new to angular. 我对棱角有些陌生。 Any help would be much appreciated. 任何帮助将非常感激。

Answer 1

Updated Answer 更新的答案

In light of the latest requirement: 根据最新要求：

I am trying to call the directive function (ie updateMap) from controller. 我正在尝试从控制器调用指令函数（即updateMap）。

You can use a Service to share variables between Controllers and Isolated Directives . 您可以使用服务在控制器和隔离指令之间共享变量。 In the example below, the Service holds the function that will be executed. 在下面的示例中，服务包含将要执行的功能。 Each directive when clicked will set the Service's function to it's own updateMap() function. 单击每个指令时，会将服务的功能设置为其自己的updateMap()函数。 Then the Controller in onFolderPathClicked() calls the Services executeFunction() function, which runs the previously set function. 然后， onFolderPathClicked()的Controller调用Services executeFunction()函数，该函数运行先前设置的函数。

script.js: 的script.js：

var module = angular.module('testApp', []);

module.service('updateMapService', function(){
  var updateMapFunction = null;
  this.executeFunction = function(){
    updateMapFunction();
  };
  this.setFunction = function(fn){
    updateMapFunction = fn;
  };
});
module.controller('crtl', function($scope, updateMapService) {
  $scope.onFolderPathClicked = function(){
    updateMapService.executeFunction();
  };
});
module.directive('folder', function($compile) {
  return {
    restrict: 'E',
    scope: {
      id: '@',
      folderPath: "="
    },
    template: '<p ng-click="onFolderClicked()">{{id}}</p>',
    controller: function($scope, $element, updateMapService) {
      $scope.onFolderClicked = function(){
        updateMapService.setFunction(updateMap);
        addFolder();
      };
      var addFolder = function() {
        $scope.folderPath = $scope.id + ":click here for calling update map";
        var el = $compile('<folder id="n" folder-path="folderPath"></folder>')($scope);
        $element.parent().append(el);
      };
      var updateMap = function() {
        alert('inside updateMap()..' + $scope.id);
      }
    }
  }
});

index.html: index.html的：

<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" href="style.css">
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
    <script src="script.js"></script>
  </head>
<body>
  <div ng-app="testApp" ng-controller="crtl">
    <div>FolderPath : <a ng-click="onFolderPathClicked()">{{ folderPath }}</a> </div>
    <folder id="1" folder-path="folderPath"></folder>
    <folder id="2" folder-path="folderPath"></folder>
  </div>
</html>

You could also move folder-path into a Service to save from passing it in as an attribute. 您也可以将folder-path移动到服务中，以免将其作为属性传递。 The code smell being that passing it in as an attribute means doing so twice, whereas in a Service it means setting it and getting it once (code reuse). 代码气味是将其作为属性传递意味着两次，而在Service中则意味着对其进行设置并获得一次（代码重用）。

如何从动态创建的指令访问控制器作用域

问题描述

1 个解决方案

解决方案1
0 2017-01-20 19:01:54

如何从动态创建的指令访问控制器作用域

问题描述

1 个解决方案

解决方案1 0 2017-01-20 19:01:54

解决方案1
0 2017-01-20 19:01:54