AngularJS Директива по доступу к области управления

Question

TL; DR Я решил свою проблему. Вот plunker с 3-х различных решений:

http://plnkr.co/edit/E0ErKs?p=preview

Я не люблю Slider1, потому что она сохраняет значение в $ объеме ({{sliderValue}}) и в соответствии с рекомендацией от углового руководства по стилю, мы должны избежать этого.

Я не люблю слайдер2, потому что он предполагает, что у контроллера есть псевдоним vm в представлении (поэтому мы создаем некоторую связь между представлением и директивой).

Решение 3 выглядит хорошо для меня. Я что-то упускаю?

Как вы могли бы написать по-другому эту директиву, чтобы быть в соответствии с Угловой философией?

---

ИСХОДНЫЙ ВОПРОС:

Я учусь угловую и не все ясно, мне все же.

Я нашел этот вопрос: How to use jQuery in AngularJS

Так я создал рабочий пример:

Директива:

(function() { 
    'use strict'; 

    angular.module('demoApp').directive('slider', function() { 
     return { 
      restrict: 'A', 
      controller: function ($scope, $element, $attrs) { 
       $scope.onSlide = function (e, ui) { 
        $scope.sliderValue = ui.value; 
        $scope.$digest(); 
       }; 
      }, 
      link: function (scope, el, attrs) { 
       var options = { 
        value: scope.sliderValue, 
        slide: scope.onSlide 
       }; 

       // set up slider on load 
       angular.element(document).ready(function() { 
        scope.$slider = $(el).slider(options); 
       }); 
      } 
     } 
    }); 
})(); 

Контроллер:

(function() { 
    'use strict'; 

    angular.module('demoApp').controller('DemoAppTestCtrl', DemoAppTestCtrl); 

    DemoAppTestCtrl.$inject = [ '$scope' ]; 

    function DemoAppTestCtrl($scope) { 
     $scope.sliderValue = 10; 
    } 
})(); 

И Html страница:

<div ng-controller="DemoAppTestCtrl as vm"> 
    Value: {{sliderValue}} 
    <div slider></div> 
</div> 

Все работает нормально. Угловой слайдер вместо < div slider >, и я могу переместить его, и я вижу изменение значений в {{sliderValue}}.

Тогда я нашел этого углового Руководство Стиля https://github.com/johnpapa/angular-styleguide

В главе о контроллерах, которые они рекомендуют использовать controllerAs с Vm синтаксисом (поскольку $ сферы плохо или что-то).

Ex:

function CustomerController() { 
    var vm = this; 
    vm.name = {}; 
    vm.sendMessage = function() { }; 
} 

Так что я изменил мой контроллер к этому:

(function() { 
    'use strict'; 

    angular.module('demoApp').controller('DemoAppTestCtrl', DemoAppTestCtrl); 

    DemoAppTestCtrl.$inject = [ ]; 

    function DemoAppTestCtrl($scope) { 
     var vm = this; 

     vm.sliderValue = 10; 
    } 
})(); 

И Html страницу:

<div ng-controller="DemoAppTestCtrl as vm"> 
    Value: {{vm.sliderValue}} 
    <div slider></div> 
</div> 

Но я не знаю, как исправить мой директивы. Мне нужна такая же функциональность, когда я перемещаю ползунок, я хочу установить vm.sliderValue внутри элемента управления вместо $ scope.sliderValue внутри области.

EDIT1:

Я был в состоянии сделать его работу, добавив $ scope.vm внутри контроллера и соединительных функций (потому что мой контроллер находится в области видимости, как VM). Но я не уверен, что это правильный способ сделать это, потому что теперь моя директива предполагает, что в области под псевдонимом $ scope.vm существует контроллер.

Является ли это плохим дизайном или нормальным способом делать вещи в Угловом?

(function() { 
    'use strict'; 

    angular 
     .module('demoApp') 
     .directive('slider', slider); 

    slider.$inject = [ ]; 

    function slider() { 
     return { 
      restrict: 'A', 
      controller: function ($scope, $element, $attrs) { 
       $scope.vm.onSlide = function (e, ui) { 
        $scope.vm.sliderValue = ui.value; 
        $scope.$digest(); 
       }; 
      }, 
      link: function (scope, el, attrs) { 
       var options = { 
        value: scope.vm.sliderValue, 
        slide: scope.vm.onSlide 
       }; 

       // set up slider on load 
       angular.element(document).ready(function() { 
        scope.$slider = $(el).slider(options); 
       }); 
      } 
     } 
    } 
})(); 

EDIT2:

Я был в состоянии создать рабочую Plunker с 3-х различных вариантах: http://plnkr.co/edit/E0ErKs?p=preview

Answer 1

Использование Область применения: ложные в качестве опции в директиве.

http://www.undefinednull.com/2014/02/11/mastering-the-scope-of-a-directive-in-angularjs/

Answer 2

попробовать что-то вроде этого:

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

 
angular.module('myApp').controller('DemoAppTestCtrl', DemoAppTestCtrl); 
 

 
function DemoAppTestCtrl() { 
 
\t var vm = this; 
 
\t 
 
    vm.sliderValue = 10; 
 
} 
 

 
angular.module('myApp').directive('slider', sliderDirective); 
 

 
function sliderDirective() { 
 
\t return { 
 
    \t restrict: 'A', 
 
    controller: sliderController, 
 
    controllerAs: 'sliderCtrl', 
 
    template: "<p>{{sliderCtrl.test}}</p>" 
 
    } 
 
} 
 

 
function sliderController() { 
 
\t var vm = this; 
 
    
 
    vm.test = "hello"; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
<div ng-app="myApp"> 
 
<div ng-controller="DemoAppTestCtrl as vm"> 
 
    Value: {{vm.sliderValue}} 
 
    <div slider></div> 
 
</div> 
 
</div>