在angularjs中的控制器中的动态添加指令

Question

我在angularjs的控制器中写了以下内容：

var firstName = angular.element('<input id="firstName" 
class="w3-input w3-border w3-round" name="firstName" type="text"   
placeholder="Firstname" ng-model="firstName" required is-number-directive>
<span class="w3-red w3-small" ng-show="userForm.firstName.$invalid">Is 
required.</span></p>
<p><label class="w3-text-black w3-left w3-large">LastName</label>');
var firstNameCompile = $compile(firstName)($scope);

指令是：

app.directive('isNumberDirective', function() {
return {
    require: '?ngModel',
    link: function(scope, element, attr, mCtrl) {
        function myValidation(value) {
            var x = +value;               
            if (x.toString() === value) {
                mCtrl.$setValidity('isNumber', true);
            } else {
                mCtrl.$setValidity('isNumber', false);
            }
            return value;
        }
        mCtrl.$parsers.push(myValidation);
    }
};
});

当我创造＆amp; instatiate firstNameCompile对象指令不绑定到对象。还要考虑相同的指令在我创建输入对象的简单html页面中正常工作。 有什么建议吗？我必须通过javascript创建对象。