Угловая директива: несколько значений из директивы в область

Question

Я хочу выставить несколько значений из атрибутов из директивы в область $ scope. директивы генерируются динамически и выглядит этот пример:

<my-directive first-value="foo" second-value="bar" third-value="foobar"></my-directive> 

мне нужны значения в $ рамки для дать им шаблону и работать с ними.

Answer 1

Easy ... :-)

var app = angular.module('app', []); 
 
app.controller('myCtrl', function ($scope) {}); 
 
app.directive('myDirective', function() { 
 
    return { 
 
    restrict: 'E', 
 
    template: '<p>myDirective:</p>{{firstValue}}, {{secondValue}}, {{thirdValue}}', 
 
    scope: { 
 
     firstValue: '@', 
 
     secondValue: '@', 
 
     thirdValue: '@' 
 
    }, 
 
    } 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
<div ng-app="app"> 
 
    <div ng-controller="myCtrl"> 
 
    <my-directive first-value="foo" second-value="bar" third-value="foobar"></my-directive> 
 
    </div> 
 
</div>

Но вы действительно должны попробовать написать такой код самостоятельно, в следующий раз ... :-)

Answer 2

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

 
app.controller('homeCtrl', function ($scope) { 
 

 

 
    
 

 
}); 
 
app.directive('myDirective', function() { 
 

 
    return { 
 
    restrict: 'AE', 
 
    template: '<h3>My Directive</h3><p>{{firstValue}}|{{secondValue}}|{{thirdValue}}</p>', 
 
    scope: { 
 
     firstValue: '@', 
 
     secondValue: '@', 
 
     thirdValue: '@' 
 
    }, 
 

 
    link: function(scope, element, attr) { 
 

 
     console.log(scope.firstValue) 
 
     console.log(scope.secondValue) 
 
     console.log(scope.thirdValue) 
 

 
    } 
 

 
    } 
 

 
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 

 
<div ng-app="app"> 
 
    <div ng-controller="homeCtrl"> 
 

 
    <my-directive first-value="foo" second-value="bar" third-value="foobar"></my-directive> 
 
    </div> 
 
</div>