Good day. colleagues have a problem. I try to get the field values ​​in the directive from input elements in each of which the page directive is written and substitute this value in appData.dataSrc [key] as the key, but the fact is that the same value is substituted each time. Please tell me how to solve the problem

<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml" ng-app="app"> <head> <title></title> <script src="angular.js"></script> <script> (function () { "use strict"; angular.module('app', []) .service("appData", function () { this.dataSrc = { field1:['zak'], field2:['bob'], field3:['nick'] }; }) .controller("someController", function ($scope, appData) { }) .directive('page', function ($compile, appData) { return { restrict: 'A', scope: false, require:'ngModel', link: function (scope, element, attributes, ctrl) { if (ctrl.$name == ctrl.$name) { var content = $compile("<input type='button' value='{{say1()}}' ng-click=say();><span ng-show='isShow();'><ul><li ng-repeat='item in getError()'>{{item}}</li><ul></span><span ng-bind='item'></span>")(scope); element.after(content); } scope.getError = function () { var key = ctrl.$name; return appData.dataSrc[key]; } scope.isShow = function () { return true; } scope.say = function (value) { alert("alloha friends" + " " + value); }; scope.say1 = function () { return "some text of the say 1"; }; scope.say2 = function () { return "some text of the say 2"; }; scope.say3 = function () { return "some text of the say 3"; }; }, } }) })(); </script> </head> <body> <div ng-controller="someController"> <input type="text" ng-model="some1" name="field1" page /> <br> <input type="text" ng-model="some2" name="field2" page /> <br> <input type="text" ng-model="some3" name="field3" page /> </body> </html>
  • ctrl. $ name == ctrl. $ name - this condition may not be fulfilled only if ctrl.$name - NaN - Grundy

1 answer 1

The problem is that directives do not have their own Osprey, so each directive during initialization rewrites the functions that were previously declared.

Quickfix - use child skop, scope:true

 (function() { "use strict"; angular.module('app', []) .service("appData", function() { this.dataSrc = { field1: ['zak'], field2: ['bob'], field3: ['nick'] }; }) .controller("someController", function($scope, appData) { }) .directive('page', function($compile, appData) { return { restrict: 'A', scope: true, require: 'ngModel', link: function(scope, element, attributes, ctrl) { var content = $compile("<input type='button' value='{{say1()}}' ng-click=say();><span ng-show='isShow();'><ul><li ng-repeat='item in getError()'>{{item}}</li><ul></span><span ng-bind='item'></span>")(scope); element.after(content); scope.getError = function() { var key = ctrl.$name; return appData.dataSrc[key]; } scope.isShow = function() { return true; } scope.say = function(value) { alert("alloha friends" + " " + value); }; scope.say1 = function() { return "some text of the say 1"; }; scope.say2 = function() { return "some text of the say 2"; }; scope.say3 = function() { return "some text of the say 3"; }; }, } }) })(); 
 <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.js"></script> <div ng-app="app" ng-controller="someController"> <input type="text" ng-model="some1" name="field1" page /> <br> <input type="text" ng-model="some2" name="field2" page /> <br> <input type="text" ng-model="some3" name="field3" page /> </div>

but it is better to rework the directive itself, for example, use controllers, use normal templates instead of composing them using the $ compile service, etc.