如何从AngularJS 1中的控制器内控制指令内动态插入的内容？_Angularjs

如何从AngularJS 1中的控制器内控制指令内动态插入的内容？

angularjs

如何从AngularJS 1中的控制器内控制指令内动态插入的内容？,angularjs,Angularjs,我有以下问题。我有一个带有一些内容的自定义指令。该指令中有一个空间位置应该是动态的（一些自定义功能）指令如下所示： var app = angular.module('plunker', []); app.directive('mydirective', mydirective); function mydirective() { return { restrict : "E", scope : { customContent: '

我有以下问题。我有一个带有一些内容的自定义指令。该指令中有一个空间位置应该是动态的（一些自定义功能）

指令如下所示：

var app = angular.module('plunker', []);
app.directive('mydirective', mydirective);
function mydirective() {
    return {
        restrict : "E",
        scope : {
         customContent: '@'
        },
        template : "<div>Some common directive stuff in here!   <div id='customContent'></div></div>",
        compile: function(element, attr) {
            return {
                post: function($scope, element, attr) {
                    console.log("POST");
                },
                pre: function($scope, element, attr) {
                    console.log("PRE: " + $scope.customContent);
                            if($scope.customContent) {
                                var customContent = (angular.element(document.getElementById('customContent')));
                                customContent.append($scope.customContent);
                            }
                }
            };
        }
    }
}

html

如您所见，我正在将传递的自定义内容作为参数注入预链接函数中。不幸的是，我无法将func（）函数挂接到控制器的作用域中，因为我希望能够从中控制事情

提前感谢您的帮助

这是一个插件：

您可以使用

ng transclude

在指令中插入内容，同时仍然可以访问父控制器的作用域

进一步阅读ng transclude:

这很好地解释了 “ng transclude”
有关更多信息，请参阅

您可以使用

ng transclude

在指令中插入内容，同时仍可以访问父控制器的作用域

进一步阅读ng transclude:

这很好地解释了 “ng transclude”
有关更多信息，请参阅

这应该满足您的要求：

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

app.controller('MainCtrl', function($scope) {
  $scope.func = function() {
    alert(1);
  }
});

app.directive('mydirective', mydirective);

function mydirective() {
        return {
            restrict : "E",
            transclude: true,
            scope : {

            },
            template : "<div>Some base directive stuff in here!   <ng-transclude></ng-transclude></div>",

        }
    }

var-app=angular.module（'plunker'，[]）；
应用程序控制器（'MainCtrl'，函数（$scope）{
$scope.func=函数（）{
警报（1）；
}
});
应用指令（“我的指令”，我的指令）；
函数mydirective（）{
返回{
限制：“E”，
是的，
范围：{
},
模板：“这里有一些基本指令！”，
}
}

及


安古拉斯普朗克
文件。写（“”）；
试验

这应该满足您的要求：

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

app.controller('MainCtrl', function($scope) {
  $scope.func = function() {
    alert(1);
  }
});

app.directive('mydirective', mydirective);

function mydirective() {
        return {
            restrict : "E",
            transclude: true,
            scope : {

            },
            template : "<div>Some base directive stuff in here!   <ng-transclude></ng-transclude></div>",

        }
    }

var-app=angular.module（'plunker'，[]）；
应用程序控制器（'MainCtrl'，函数（$scope）{
$scope.func=函数（）{
警报（1）；
}
});
应用指令（“我的指令”，我的指令）；
函数mydirective（）{
返回{
限制：“E”，
是的，
范围：{
},
模板：“这里有一些基本指令！”，
}
}

及


安古拉斯普朗克
文件。写（“”）；
试验

使用另一个属性将函数传递到独立的作用域中这是可行的，但我只是展示了一个简单的函数示例。假设自定义模板包含多个函数调用。不仅如此；我可能会从使用此指令的另一个控制器中插入完全不同的内容。使用另一个属性将函数传递到隔离范围这将起作用，但我只是展示了一个简单的示例，其中包含一个函数。假设自定义模板包含多个函数调用。不仅如此；我可能会在使用此指令的另一个控制器中插入完全不同的内容。

transclude

不是

scope

的属性……它是同级

transclude

不是

scope

的属性……它是同级

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

app.controller('MainCtrl', function($scope) {
  $scope.func = function() {
    alert(1);
  }
});

app.directive('mydirective', mydirective);

function mydirective() {
        return {
            restrict : "E",
            transclude: true,
            scope : {

            },
            template : "<div>Some base directive stuff in here!   <ng-transclude></ng-transclude></div>",

        }
    }

<!DOCTYPE html>
<html ng-app="plunker">

  <head>
    <meta charset="utf-8" />
    <title>AngularJS Plunker</title>
    <script>document.write('<base href="' + document.location + '" />');</script>
    <link rel="stylesheet" href="style.css" />
    <script data-require="angular.js@1.5.x" src="https://code.angularjs.org/1.5.8/angular.js" data-semver="1.5.8"></script>
    <script src="app.js"></script>
  </head>

  <body ng-controller="MainCtrl">

      <mydirective><button ng-controller='MainCtrl' ng-click='func()'>Test</button></mydirective>

  </body>

</html>