2016-09-15 38 views
0

我有以下問題。 我有一些內容的自定義指令。 這個指令中有一個空間位置應該是動態的(一些自定義功能)。如何在AngularJS 1的控制器中控制動態插入內容的指令?

指令看起來是這樣的:

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); 
          } 
       } 
      }; 
     } 
    } 
} 

正如你可以看到有一個與ID的div標籤= 'customContent'

現在,每當我使用這個指令從一個控制器,我希望不僅能夠在該指令中注入特殊的自定義內容,還能夠提供範圍界定功能。

所需的結果應該是:

控制器

app.controller('MainCtrl', function($scope) { 
    $scope.func = function() { // THIS DOESN'T WORK 
     alert(1); 
    } 
}); 

HTML

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

正如你可以看到我注射過立方米stom-content作爲PRE鏈接函數中的參數。不幸的是,我不能將func()函數掛接到控制器的作用域中,因爲這是我希望能夠控制其中的東西的地方。

非常感謝您的幫助!

這是plunker:https://plnkr.co/edit/I4WAQ20ugeDiackxXqUz?p=preview

+0

傳遞函數爲隔離範圍與另一個屬性 – charlietfl

+0

這會的工作,但我只是展示了一個具有單一功能的簡單示例。想象一下,自定義模板包含多個函數調用。不僅;我可能會在另一個使用此指令的控制器中插入完全不同的內容。 – kirilv

回答

1

這應該做你想要什麼:

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="[email protected]" 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> 

Working plunker

+0

'transclude'不是範圍的屬性...這是一個兄弟 – charlietfl

+0

哎呀,編輯感謝 – Neil

+0

酷!非常感謝! – kirilv

相關問題