modules.define('bemdom', ['i-bem__dom'], function(provide, BEMDOM) {
provide(BEMDOM);
});
modules.define('angular-bem',
['BEMHTML', 'bemdom', 'jquery', 'i-bem__dom_init'],
function(provide, BEMHTML, BEMDOM, $) {
angular.module('angular-bem', [])
.value('bemhtml', BEMHTML)
.value('bemdom', BEMDOM)
.factory('ngbem', ngBemFactory)
.directive('ngBem', ngBemDirective)
.directive('iBem', iBemDirective);
function ngBemFactory($compile, $timeout, bemdom) {
var service = { render : render };
return service;
function render(bemjson, element, scope) {
element.replaceWith(
$compile(BEMHTML.apply(bemjson))(scope)
);
}
}
function ngBemDirective(ngbem) {
return {
restrict : 'E',
link : function(scope, element, attrs) {
var bemjson = scope.$eval(attrs.bemJson || element.text());
ngbem.render(bemjson, element, scope);
}
};
}
function iBemDirective(bemdom){
return {
restrict: 'C',
require : '?ngModel',
link : function(scope, element, attrs, ngModel) {
if (!ngModel) return;
var bem = scope.$eval(attrs.bem);
angular.forEach(bem, function(v,k){
bem[k] = $(element).bem(k);
bem[k].on('change', function(e, data) {
if(data && data.source === 'ng-model') {
scope.$evalAsync(setModelValue.bind(bem[k]));
} else {
scope.$evalAsync(setViewValue.bind(bem[k]));
}
});
setModelValue.bind(bem[k])();
});
ngModel.$render = function() {
var value = angular.isUndefined(ngModel.$viewValue) ? '' : ngModel.$viewValue;
angular.forEach(bem, function(v,k){
bem[k].setVal && bem[k].setVal(value, { source : 'ng-model' });
});
};
function setViewValue() {
ngModel.$setViewValue(this.getVal());
}
function setModelValue() {
// prevents calling of ng-change listeners
ngModel.$modelValue = this.getVal();
}
}
};
}
provide(angular.module('angular-bem'));
}
);
modules.require(['angular-bem', 'jquery'], function(ng, j){
window.$ = j;
angular.module('app', ['angular-bem'])
.controller('appController', function AppController(){
var vm = this;
vm.hello = 'Hello, World';
vm.select = [2];
vm.log = function(l){
console.log(l);
};
});
angular.bootstrap(document, ['app']);
});
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>AngularJS Plunker</title>
<link data-require="bem-components@2.2.0" data-semver="2.2.0" rel="stylesheet" href="https://yastatic.net/bem-components/latest/desktop/bem-components.css" />
<script data-require="bem-components@2.2.0" data-semver="2.2.0" src="https://yastatic.net/bem-components/latest/desktop/bem-components.js+bemhtml.js"></script>
<script>document.write('<base href="' + document.location + '" />');</script>
<link rel="stylesheet" href="style.css" />
<script data-require="angular.js@1.4.x" src="https://code.angularjs.org/1.4.2/angular.js" data-semver="1.4.2"></script>
<script src="app.js"></script>
</head>
<body ng-controller="appController as vm">
<ng-bem ng-cloak>
[
{
block : 'input',
mods : {
theme : 'islands',
size : 'xl',
angular : true
},
attrs : {
'ng-model' : 'vm.hello',
'ng-change' : 'vm.log("changed")'
}
},
{
block : 'button',
mods : {
theme : 'islands',
size : 'xl'
},
text: '{{vm.hello}}',
attrs : {
'ng-click' : 'vm.hello="Bye, Bye"'
}
},
{
block : 'select',
mods : { mode : 'check', theme : 'islands', size : 'xl' },
name : 'select1',
text : 'Программа конференции',
attrs : {
'ng-model' : 'vm.select',
'ng-change' : 'vm.log("changed")'
},
options : [
{ val : 1, text : 'Доклад' },
{ val : 2, text : 'Мастер-класс' },
{ val : 3, text : 'Круглый стол' }
]
}
]
</ng-bem>
<p ng-cloak>{{vm.hello}}</p><p ng-cloak>{{vm.select}}</p>
</body>
</html>
/* Put your css in here */