AngularJs 中的嵌套指令未更新视图（DOM）元素

Question

我做了一个嵌套指令，并试图从 html 视图中调用它，但没有更新 html 中的视图元素。

我可以从调用控制器获取更新后的值，但在视图级别看不到更新后的效果。

这是Js

    // Code goes here
"use strict";
var myApp=angular.module("myApp",[]);

myApp.directive("selectDirective", [function () {
    return {
        restrict: "E",
        template: '<select class="form-control input-sm dropdown" data-ng-model="model.args.selectedItem" data-ng-options="item[model.args.displayField] for item in model.args.source" data-ng-change="model.itemChange(model.args.selectedItem)"><option value="">Select Any Item</option></select>',
        scope: {
        },
        bindToController: { args: "=" },
        link: function (scope, element, attrs) {
            var self = scope.model || {};
            var initializeControl = function () {
                if (self.args == undefined) {
                    self.args = {};
                }
                if (self.args.method == undefined) {
                    self.args.method = {};
                }
                if (self.args.isDisabled == undefined) {
                    self.args.isDisabled = false;
                }
                if (self.args.displayField == undefined) {
                    self.args.displayField = '';
                    //alert('Display Field is blank for dropdown control.')
                }
                if (self.args.valueField == undefined) {
                    self.args.valueField = '';
                    //alert('Value Field is blank for dropdown control.')
                }
                if (self.args.source == undefined) {
                    self.args.source = {};
                }
                if (self.args.hide == undefined) {
                    self.args.hide = false;
                }
            }
            var assignMethod = function () {
                self.args.method =
                    {
                        setEnable: function (args) {
                            self.args.isDisabled = !args;
                        },
                        setVisible: function (args) {
                            self.args.hide = !args;
                        },
                        getText: function () {
                            return self.args.selectedText;
                        },
                        getValue: function () {
                            return self.args.selectedValue;
                        },
                        setItem: function (item) {
                            if (item != undefined) {
                                var index = self.args.source.indexOf(item);
                                self.args.selectedText = item[self.args.displayField];
                                self.args.selectedValue = item[self.args.valueField];
                                self.args.selectedItem = item;
                                self.args.selectedIndex = index;
                            }

                        }
                    }
            }
            self.itemChange = function (item) {

                if (item != undefined) {
                    var index = self.args.source.indexOf(item);
                    self.args.selectedText = item[self.args.displayField];
                    self.args.selectedValue = item[self.args.valueField];
                    self.args.selectedItem = item;
                    self.args.selectedIndex = index;
                }
            }

            initializeControl();
            assignMethod();

        },
        controller: function () { },
        controllerAs: 'model'
    }
}]);
myApp.directive("stateDirective", [function () {
    return {
        restrict: "E",
        template: '<select-directive args="model.args"></select-directive>',
        scope: {},
        bindToController: { args: "=" },
        link: function (scope, element, attrs) {
            var self = scope.model || {};

            var initializeControl = function () {
                if (self.args == undefined) {
                    self.args = {};
                }
                var sourceList = [{ id: 1, name: "AA", value: "AA" },
                              { id: 2, name: "AB", value: "AB" },
                              { id: 3, name: "ABD", value: "ABD" },
                              { id: 4, name: "ABE", value: "ABE" },
                              { id: 5, name: "ACT", value: "ACT" },
                              { id: 6, name: "AE", value: "AE" }];
                self.args.source = sourceList;
                self.args.displayField = 'name';
                self.args.valueField = 'value';
            }();

        },
        controller: function () {

        },
        controllerAs: 'model'
    }
}]);
myApp.controller("homeController", ['$interval', function ($interval) {
    var self = this;

    var initializeControl = function () {

        self.state1 = {};
        self.state2 = {};

        self.ClickMe = function () {
            debugger;
            aler(1);
            self.state2.method.setItem(self.state1.selectedItem);
        }

        self.ClickMe2 = function () {
            debugger;
             aler(1);
            var x1 = self.state1;
            var x2 = self.state2;
        }



    };
    $interval(function () {
    }, 500);

    initializeControl();
}]);

这里是 Html:

     <div class="cold-md-12" ng-controller="homeController as model">
    <h1>Home Page</h1>
    <state-directive args="model.state1"></state-directive>
    <br />
    <input type="button" value="ClickMe" data-ng-click="model.ClickMe()" />
    <state-directive args="model.state2"></state-directive><br />
    <input type="button" value="Submit" data-ng-click="model.ClickMe2()" />
</div>

Fiddle这里

N.B：我也尝试在指令和控制器中使用 $watch 和 $timeout，但没有用。

Answer 1

如果 scope.model 未初始化，您将在链接函数中将 {} 分配给 self。但是你永远不会真正把它放在控制器上。如果 scope.model 存在，那很好，因为您随后将所有内容绑定到控制器，控制器绑定到范围，但如果不存在，就会出错。我猜这就是正在发生的事情。

不过，如果我可以这么大胆的话，我会说命名您的控制器模型非常具有误导性。因为在开发世界中，模型和控制器是两种截然不同的东西。

干杯，亚伦

Answer 2

刚刚在 ng-option 中添加了 track by。

我只是更改 data-ng-options 值来自

item[model.args.displayField] for item in model.args.source

至

item[model.args.displayField] for item in model.args.source track by item[model.args.valueField]

并且运行良好。

AngularJs 中的嵌套指令未更新视图（DOM）元素

Nested Directive Not Updating View(DOM) Element in AngularJs

html

angularjs

angular-directive

isolate-scope