在Angular指令

时间:2018-02-15 18:20:12

标签: angularjs angularjs-scope angular-directive

我有一个动态表单使用模式表单(http://schemaform.io/) - 我需要包含一些按钮来编辑或删除表单中的每个控件,所以我构建了这个指令,找到所有表单控件然后过滤特定的控件我需要根据名称中的模式。 我知道这可能不是使用指令的正确方法,但由于这些字段是动态构建的,我唯一能想到的用于将指令应用于它们的是类 - 然后过滤,因为还有其他字段我不希望受指令影响的页面。

angular.module('appCliente')
   .directive('formControl', function ($compile) {
      return {
         restrict: 'CAE',
         link: Link
      };

      function Link(scope, element, attrs) {


         var patt = new RegExp("^[a-zA-Z]+[0-9]{14}$");
         var res = patt.test(element[0].name);

         if (res) {

            //finds in the $scope.formDefinition the element with the name corresponding to the controller selected
            ̶v̶a̶r̶ ̶c̶o̶n̶t̶r̶o̶l̶e̶r̶E̶d̶i̶t̶e̶d̶ ̶=̶ ̶$̶s̶c̶o̶p̶e̶.̶f̶o̶r̶m̶D̶e̶f̶i̶n̶i̶t̶i̶o̶n̶.̶f̶i̶n̶d̶(̶
            var controlerEdited = scope.formDefinition.find(
                    function (obj) { 
                    return obj.name === element[0].name;
                }
            )); 

            //Creates the button to append and calls the $scope.editControl on click, passing the correct item from the $scope.formDefinition object

            var elementAppend = "<a id='ges-pan-srv-lst-bEdit' class='btn btn-default btn-sm' ng-click='editControl(" + controlerEdited + ")' title=\"{{'Editar Formulário' | translate}} {{formulario.nome}}\" data-toggle='modal' data-target='#modalOpcoes'><i class='fa fa-pencil'></i></a>";

            var a_input = angular.element($compile(elementAppend)(scope));
            element.after(a_input);
         }

      }
   });

问题是我不知道如何从控制器访问$ scope变量或函数 - 该对象始终未定义,并且从不在click事件上调用该函数。  我想在这个按钮的click事件上调用该函数,我将其附加到指令所在的元素。    为了正确地做到这一点,我需要访问功能$ scope.editControl和变量$ scope.formDefinition,它们都在使用该指令的元素所在的控制器中定义。

  angular.module('appCliente').controller('FormularioEditarController', ['$scope', '$location', '$routeParams', '$translate'
   function ($scope, $location, $routeParams, $translate) {

    //variable I need to access on the directive
    $scope.formDefinition = {};

    //Function I need to acess on the directive
     $scope.editControl = function (controle) {
            //edit this control
     }


   }

我可能会离开这里,所以,如果有更好的解决方案,我会很感激。

仍然无法正常工作。在这个示例https://plnkr.co/edit/pzFjgtf9Q4kTI7XGAUCF?p=preview中,它可以工作,但由于某种原因,我的函数永远不会被调用,并且变量总是未定义的。此变量仅由初始化函数设置,如此

 formularioFactory.GetFormulario($routeParams.idFormulario) 
    .success(function (result) {
         $scope.formDefinition= result;

我想知道这不是导致该变量未定义的原因。我不知道指令代码何时运行,是否在其他所有内容之后?

0 个答案:

没有答案