[AngularJS]SelectOrDie-JQuery 作为指导

发布时间: 2017/4/16 21:50:15
注意事项: 本文中文内容可能为机器翻译,如要查看英文原文请点击上面连接.

我想要建立http://vst.mn/selectordie/作为指导我角的应用程序中。我指几件样品,试过,但不能搞定。

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

app.directive('selectordie', function($timeout) {
  return {
    restrict: 'A',
    require: 'ngModel',
    priority:1,
    compile: function (tElement, tAttrs) {
      return function (scope, element, attrs, ngModel) {
        $timeout(function() {
          element.find('select').selectOrDie({
            placeholder: attrs.label ? attrs.label : null,
            onChange: function() {
              ngModel.$setViewValue($(this).val());
            }
          });
        });
        ngModel.$render = function() {
          console.log(element.find('select').val(ngModel.$modelValue));
          element.find('select').val(ngModel.$modelValue);
          element.find('select option[value="' + ngModel.$modelValue + '"]').attr('selected', 'selected');
          element.find('select').selectOrDie('update');
        };
      }
    }
  };
}); 

当我调用,

  angular.module('SSSample', ['ui.bootstrap', 'ui.router', 'ngAnimate','selectordie']); //

它给"selectordie 不一个函数"。不是呈现页面本身。

http://jsfiddle.net/Femina/6659mabm/

我也尝试作为"E","C"。请指导我一步一步的方法。所以它将帮助我来构建和定制其他插件。此外,我想知道,有没有什么办法来建立"共同插件指令",作为动态传递插件和自定义如果需要。

解决方法 1:

你不是使用/理解 compile 的指令方法正确。全吹 compile 方法看起来像这样︰

'compile': function (tElem, tAttrs) {

    return {

        'pre': function(scope, iElem, iAttrs){

        },

        'post': function(scope, iElem, iAttrs){

        }
    }
}

您可以执行逻辑在 compile 方法和 prepost 链接方法。所有被炒鱿鱼按连续顺序却很大的差别,所有这些。伟大的写了在这个问题上可以找到下面的链接,但重要的是要知道是你想要访问 iElem (该指令是对元素) 时充分处理它 (和所有它的子元素),这就是 post 链接方法。事情是,使用 post 联系的方法是相同的省略 compile 方法都在一起,使用 link 指令定义的方法︰

'link': function (scope, elem, attrs) {

}

所以当你想要初始化 selectordie 插件在元素上的时你会需要这样的指令的 link 方法 (或在编译的 post 方法):

'link': function (scope, elem, attrs) {
    $(elem).selectOrDie();
}

这里是链接到交上来,我跟你讲,它是真正全面和要真正得到概念好图片您需要阅读它在它的全部。我可以引用一些重要的部分,但那不会做到公正。它真的是一个推荐的读取的如果真的想写好的指令︰

http://www.jvandemo.com/the-nitty-gritty-of-compile-and-link-functions-inside-angularjs-directives/

下面这幅图是一个工作示例。请注意,我丢弃了 restrictrequire 定义因为不需要显示一个工作指令,您可以开始使用。I'de 真的建议你也读下面的链接,指令角指南。它将会了解你每个你的指令中的定义是什么,这样你就可以决定何时使用它们和为什么而不是使用它们,因为一些教程是这么说的︰

https://docs.angularjs.org/guide/directive

angular.module('App', ['selectordie']);

angular.module('App').controller('Controller', [
             '$scope',
    function ($scope) {
        $scope.options = [{
            id: 1,
            name: 'Alpha'
        }, {
            id: 2,
            name: 'Bravo'
        }, {
            id: 3,
            name: 'Charlie'
        }, {
            id: 4,
            name: 'Delta'
        }];
        $scope.selected = $scope.options[0];
    }
]);

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

angular.module('selectordie').directive('selectordie', [
    function () {
        return {
            'priority': 1,
            'link': function (scope, iElem, iAttrs) {
                $(iElem).selectOrDie();
            }
        };
    }
]);
<!DOCTYPE html>
<html ng-app="App">
    <head>
        <meta charset="utf-8" />
        <title>Angular 1.5.0</title>
        <script>document.write('<base href="' + document.location + '" />');</script>
        <link type="text/css" rel="stylesheet" href="//rawgit.com/vestman/Select-or-Die/master/_src/selectordie.css" />
        <script type="application/javascript" src="//code.jquery.com/jquery-1.12.0.min.js"></script>
        <script type="application/javascript" src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.0/angular.js"></script>
        <script type="application/javascript" src="//rawgit.com/vestman/Select-or-Die/master/_src/selectordie.js"></script>
        <script src="app.js"></script>
    </head>
    <body ng-controller="Controller">
        <select selectordie name="select" id="select" ng-model="selected" ng-options="option.name for option in options">
        </select>
        {{selected}}
    </body>
</html>

关于你关于常见的插件指令的问题,我不认为这是可能的不会推荐它,即使它是。对每个案件分开,所以你有量身定制的解决方案。如果你会这样做,需要一些简单的事情的时候,你会正在准备一些复杂的膨胀。

希望有所帮助,祝你的项目

官方微信
官方QQ群
31647020