might
@might
javascript developer

Пример работы с директивами?

Может кто-нибудь поделиться примером директивы, которая в реальном времени меняла бы значения на странице в зависимости от выбранного значения из выпадающего списка. То есть что-то типа, если значение выбрано одно, то выводится одно значение в нужной области, если другое - соответственно другое значение. Пытаюсь разобраться с директивами, да как-то туго идёт.
  • Вопрос задан
  • 2224 просмотра
Решения вопроса 1
Вот, например есть селект и директива, меняющая текст в зависимости от значения селекта (рабочий пример):

app.js
angular.module('myApp',[]);

angular.module('myApp')
    .controller('myCtrl',[ '$scope',
        function($scope){
          $scope.options = [
            {name:'text1'},
            {name:'text2'}
          ];
          $scope.selectedText = $scope.options[0];
        }
    ])
    .directive('myDirective', [ function () {
        return {
                restrict: 'AE',
                scope: {
                    selectedValue: '=ngModel',
                },
                templateUrl: 'directive-template.html',
                link: function(scope,elem,attrs) {
                
                },
                controller: function($scope) {
                  $scope.isChosen = function(v) {
                    return $scope.selectedValue == v;
                  };
                }
            };
    }])
;

index.html
<body ng-controller="myCtrl">
    <p>Hello world!</p>
    <select ng-model="selectedText" ng-options="opt.name for opt in options"></select>
    <div ng-model="selectedText.name" my-directive=""></div>
  </body>

directive-template.html
<div>
  <h1 ng-show="isChosen('text1')"> ТЕКСТ 1 </h1>
  <h1 ng-show="isChosen('text2')"> ТЕКСТ 2 </h1>
</div>
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы
22 нояб. 2024, в 00:55
500 руб./за проект
21 нояб. 2024, в 23:30
300000 руб./за проект
21 нояб. 2024, в 22:21
3000 руб./в час