Question

我试图重新解决我的问题。但它有点复杂。所以我首先在这里发布我的问题，看看是否有人在我重新制作它时有相同的经验。

我的主页上有一个按钮A.当我单击此按钮时，它将弹出（使用$ mdDialog）一个显示html页面B的窗口。此页面上有一个按钮C.当我单击它时，它将弹出一个显示html页面D的窗口。

因此页面D具有以下结构:(它有一个名为dCtrl.js的控制器文件）

<uib-accordion>
<div uib-accordion-group>
...some input fields here
</div>
<div uib-accordion-group>
<md-input-container class="md-block" flex-gt-sm>
    <label>Telephone Number</label>
    <input name="phoneNum" type="text" ng-required="true" id = "phoneNum"
           ng-model="newCustomer.Phone" ng-change="formatTelNo()"
           ng-pattern="/^[(][0-9]{3}[)] [0-9]{3}-[0-9]{4}$/"
           placeholder="(###) ###-####" />                   
</md-input-container>
</div>
<div uib-accordion-group>
...some input fields here
</div>
</ubi-accordion>

我想要获得的是：当用户输入电话号码时，我会将其转换为格式（xxx）XXX-XXXX。

我尝试的第一个解决方案是使用指令，因为我已准备好指令。我在主页上使用了该指令。它运作良好。但是，这里似乎没有触发指令。

我尝试的第二个解决方案是ng-change = formatTelNo（），但也无法触发。

我尝试的第三个解决方案是$ watch，

$scope.$watch('newCustomer.Phone',
    function (newVal, oldVal) {do sth here},true)

此$ watch也无法触发。顺便说一句，dCtrl.js中的其他函数都可以工作。

所以我猜这与使用$ mdDialog的$范围有关？或者它与使用md-input-container或uib-accordion有关？有谁知道如何解决这个问题？

FYI 我的指令如下：

'use strict';
app.directive('phoneInput', function ($filter, $browser) {
return {
    require: 'ngModel',
    link: function ($scope, $element, $attrs, ngModelCtrl) {
        var listener = function () {
            var value = $element.val().replace(/[^0-9]/g, '');
            $element.val($filter('tel')(value, false));
        };

        // This runs when we update the text field
        ngModelCtrl.$parsers.push(function (viewValue) {
            return viewValue.replace(/[^0-9]/g, '').slice(0, 10);
        });

        // This runs when the model gets updated on the scope directly and keeps our view in sync
        ngModelCtrl.$render = function () {
            $element.val($filter('tel')(ngModelCtrl.$viewValue, false));
        };

        $element.bind('change', listener);
        $element.bind('keydown', function (event) {
            var key = event.keyCode;
            // If the keys include the CTRL, SHIFT, ALT, or META keys, or the arrow keys, do nothing.
            // This lets us support copy and paste too
            if (key == 91 || (15 < key && key < 19) || (37 <= key && key <= 40)) {
                return;
            }
            $browser.defer(listener); // Have to do this or changes don't get picked up properly
        });

        $element.bind('paste cut', function () {
            $browser.defer(listener);
        });
    }

};
}).filter('tel', function () {
  return function (tel) {
console.log(tel);
if (!tel) { return ''; }

var value = tel.toString().trim().replace(/^\+/, '');

if (value.match(/[^0-9]/)) {
  return tel;
}

var country, city, number;

switch (value.length) {
case 1:
case 2:
case 3:
  city = value;
  break;

default:
  city = value.slice(0, 3);
  number = value.slice(3);
}

if (number) {
  if (number.length > 3) {
    number = number.slice(0, 3) + '-' + number.slice(3, 7);
  }
  else {
    number = number;
  }

  return ("(" + city + ") " + number).trim();
}
    else {
      return "(" + city;
    }

  };
});

现在我可以触发我的指令，但是所有内容都是未定义的，例如element，attrs或ngModelCtrl。

ng-change，directive，$ watch都在$ mdDialog页面中无效

0 个答案: