Javascript 初始化angular指令中的文本输入字段

我有一个显示输入字段的指令，我想用来自服务器的数据初始化这些字段。问题是，在使用ng模型时，我无法做到这一点。 在使用控制器中使用的指令之前，类似于$scope.field1=$scope.first.field1

这是我的密码。为了便于阅读，我对它进行了简化，但思想就在这里

在我的控制器中，我有以下代码：

app.controller('MyController',
    ['$scope', 'myData', function($scope, myData) {
        myData.then(function(data) {
            $scope.first = data.first;
            $scope.second = data.second;
        });
}]);

在第一个和第二个字段中，我有两个字段：字段1和字段2

在html代码中，我有以下几点：

<h1>First</h1>
<my-directive info="first"></my-directive>
<h1>Second</h1>
<my-directive info="second"></my-directive>

以及myDirective.html代码：

<input type="text" ng-model="myfield1" />
<input type="text" ng-model="myfield2" />
<input type="submit" ng-click="doStuff()" />

如果我在myDirective.html中写入：

<input type="text" value="info.field1" />

我可以很好地看到它的价值

有什么想法吗？

检查工作演示：

为指令定义控制器并在其中执行初始化：

app.directive('myDirective', function() {
    return {
        restrict: 'E',
        scope: {
            info: '='
        },
        controller: ['$scope', 'myData', function ($scope, myData) {
           myData.then(function(data){
               $scope.first = data.first;
               $scope.second = data.second;
           });
        }],
        ...
    },

检查工作演示：

为指令定义控制器并在其中执行初始化：

app.directive('myDirective', function() {
    return {
        restrict: 'E',
        scope: {
            info: '='
        },
        controller: ['$scope', 'myData', function ($scope, myData) {
           myData.then(function(data){
               $scope.first = data.first;
               $scope.second = data.second;
           });
        }],
        ...
    },

---

您的指令可能在加载数据之前初始化。您的指令将ng模型视为未定义的变量。您没有直接在模板中使用信息，因此没有自动$watch供您使用：）

您需要$watch指令中的info变量，并在更改时调用doStuff函数

注意：我不建议仅为此任务向指令添加控制器。当您需要与其他指令通信时，需要向指令添加控制器。不用于等待异步数据

编辑

你应该这样做

app.directive('myDirective', function() {
return {
    restrict: 'E',
    scope: {
        info: '='
    },
    templateUrl: 'static/js/myDirective.html',
    link: function(scope, element, attrs) {
        scope.doStuff = function() {
            /* Do stuff with 
            scope.field1 and scope.field2 */
        }
        scope.$watch('info', function(newValue){
            scope.doStuff();
        });
    }
};
});

---

您的指令可能在加载数据之前初始化。您的指令将ng模型视为未定义的变量。您没有直接在模板中使用信息，因此没有自动$watch供您使用：）

您需要$watch指令中的info变量，并在更改时调用doStuff函数

注意：我不建议仅为此任务向指令添加控制器。当您需要与其他指令通信时，需要向指令添加控制器。不用于等待异步数据

编辑

你应该这样做

app.directive('myDirective', function() {
return {
    restrict: 'E',
    scope: {
        info: '='
    },
    templateUrl: 'static/js/myDirective.html',
    link: function(scope, element, attrs) {
        scope.doStuff = function() {
            /* Do stuff with 
            scope.field1 and scope.field2 */
        }
        scope.$watch('info', function(newValue){
            scope.doStuff();
        });
    }
};
});

---

在指令中，

myfield1

和

myfield2

不存在。使用

info.field1

即可解决此问题

var myApp=angular.module（'myApp'，[]）；
//在这里伪造我的数据；在您的示例中，这将来自服务器
var myData={
第一:{
字段1：“第一字段1”，
字段2：“第一字段2”
},
第二：{
字段1：“第二字段1”，
字段2：“第二字段2”
}
};
myApp.controller（'MyController'，['$scope'，函数（$scope）{
$scope.first=myData.first；
$scope.second=myData.second；
}]);
myApp.directive（'myDirective'，function（）{
返回{
限制：'E'，
范围：{
信息：'='
},
模板：“”，
链接：函数（范围、元素、属性）{
scope.doStuff=函数（）{
警报（'Info:'+scope.Info.field1+'、'+scope.Info.field2'）；
}
}
};
});

弗斯特
第二
在指令中，
myfield1
和
myfield2
不存在。使用
info.field1
即可解决此问题


var myApp=angular.module（'myApp'，[]）；
//在这里伪造我的数据；在您的示例中，这将来自服务器
var myData={
第一:{
字段1：“第一字段1”，
字段2：“第一字段2”
},
第二：{
字段1：“第二字段1”，
字段2：“第二字段2”
}
};
myApp.controller（'MyController'，['$scope'，函数（$scope）{
$scope.first=myData.first；
$scope.second=myData.second；
}]);
myApp.directive（'myDirective'，function（）{
返回{
限制：'E'，
范围：{
信息：'='
},
模板：“”，
链接：函数（范围、元素、属性）{
scope.doStuff=函数（）{
警报（'Info:'+scope.Info.field1+'、'+scope.Info.field2'）；
}
}
};
});

弗斯特
第二
这不是你犯的一个错误。你有很多。读取文件并重试。您误解了指令的概念，试图从具有隔离作用域的指令中访问父作用域变量。您能告诉我我试图从指令中访问父作用域的位置吗？在myDirective.html中，您试图访问指令中不存在的字段1和字段2scope@bahadir
myDirective.html
是指令模板。是的，我看到了。我想说的是，指令的范围不包含field1和field2。我想他们一定在控制器范围内。如果scope.doStuff正在生成字段1和字段2，则在单击按钮之前，它们仍然不可用。因此，字段不会被初始化编辑并不是一个错误。你有很多。读取文件并重试。您误解了指令的概念，试图从具有隔离作用域的指令中访问父作用域变量。您能告诉我我试图从指令中访问父作用域的位置吗？在myDirective.html中，您试图访问指令中不存在的字段1和字段2scope@bahadir
myDirective.html
是指令模板。是的，我看到了。我想说的是，指令的范围不包含field1和field2。我想他们一定在控制器范围内。如果scope.doStuff正在生成字段1和字段2，则在单击按钮之前，它们仍然不可用。因此，字段不会通过在控制器内部进行初始化来初始化，您的意思是使用类似“$scope.first.field1=…”的东西吗？（很抱歉，这是我第一次使用angular）我试过了，但没有成功。我尝试使用$scope.first.field1=data.first.field1。这就是你的意思吗？事实上，在JSFIDLE中它是有效的。我不知道为什么当我试着。。。我确实设法与另一位同事解决了我的问题